盒子模型：

所有HTML元素可以看作盒子,在CSS中，"box model"是用来设计和布局时 使用。

CSS盒模型本质上是一个盒子， 封装周围的HTML元素， 它包括：边距，边框，填充和实际内容。

外边距属性：设置对象四边的外部边距

  • 内联块级元素和块级元素的可以设置外边距。
  • 内联元素可以设置左、右两边的外边距；若要设置上、下两边的外边距，必须先使该元素变为块级元素或内联块级元素。
  • 如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。
  • 如果提供两个，第一个用于上、下，第二个用于左、右。
  • 如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。

内边距属性：设置对象四边的外部边距

  • 设置内联块级元素和块级元素的内边距。
  • 行内元素可以设置左、右两边的内边距；若要设置上、下两边的内边距，必须先使该元素变为块级或内联块级元素。
  • 改变padding的值，就改变了content的大小
  • 而改变margin的值，则不改变content的大小
 <style type="text/css">

     #container{

         border: 2px black solid;

         width: 700px;

         height: 800px;

     }

     #child{

         border: 2px black solid;

         width: 400px;

         height: 400px;

         margin: 100px auto;/* 设置外边距 */

         padding: 100px;/* 设置内边距 */

     }

 </style>

 </head>

 <body>

     <div id="container">

         <div id="child">div1</div>

     </div>

 </body>

css内外边距属性的更多相关文章

  1. CSS 内外边距 float positio属性

    一.外边距和内边 margin:            用于控制元素与元素之间的距离 外边距:margin的最基本用途就是控制元素周围空间的间隔,从视觉角度上达到相互隔开的目的. padding:   ...

  2. CSS margin 外边距 属性的位置关系

    padding:内边距 margin :外边距 margin:10px; 所有 4 个外边距都是 10px ******************************************* ma ...

  3. [Web 前端] 013 css 内外边距

    1. css 内间距 也称:"内补白"或"内补丁" 参数 释义 padding 检索或设置对象四边的内部边距,如 padding:10px; padding:5 ...

  4. CSS Margin(外边距)

    CSS Margin(外边距)属性定义元素周围的空间. Margin margin清除周围的元素(外边框)的区域.margin没有背景颜色,是完全透明的 margin可以单独改变元素的上,下,左,右边 ...

  5. CSS：CSS margin(外边距)

    ylbtech-CSS:CSS margin(外边距) 1.返回顶部 1. CSS margin(外边距) CSS margin(外边距)属性定义元素周围的空间. margin margin 清除周围 ...

  6. css - 盒子内外边距

    css - 盒子内外边距 元素内边距 内边距是指元素包含的内容离元素边框之间的间距,padding会撑大盒子.在浏览器中显示的元素宽高包含了padding. div{     width:200px; ...

  7. 0019 盒子模型（CSS重点）：边框、内外边距、布局稳定性、PS

    typora-copy-images-to: media 第01阶段.前端基础.盒子模型 盒子模型(CSS重点) css学习三大重点: css 盒子模型 . 浮动 . 定位 主题思路: 目标: 理解: ...

  8. css关于内外边距的详细解释

    贴图吧,图一眼明了. 无效果时候有 只有一个<div>啦啦啦</div> 只有padding时候有: padding详细设计时: 解释:padding是对内的,如padding ...

  9. Android UI系列-----长度单位和内外边距

    这篇随笔将会记录一下在控件布局时,设定距离的三种长度单位:px.dp.sp以及内外边距的属性 1.三种长度单位 ①px:px是我们常见的一种距离单位,它表示的是一个单位像素,我们经常说我们手机或者电脑 ...

随机推荐

  1. WORDPRESS博客完美更换网站空间服务器的方法

    更换主机空间的步骤:原主机的所有数据移动至新主机上→修改wp-config.php数据库连接信息 (1)备份原主机全站文件 使用FTP备份网站根目录下所有文件并上传到新主机,向主机客服询问FTP地址. ...

  2. Case 条件运算符

    Case运算有两种写法,平常用的都比较多,这里只简单复习下,Case的语法帮助里就好,这里我尝试用颜色区分的方式让大家一眼就能了解其结构: 写法一:) select case when PriceTy ...

  3. jquery横向纵向鼠标滚轮全屏切换

    html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF- ...

  4. 【转】C# 中Linq查询所有上级节点或所有下级节点

    using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Net ...

  5. IPFS扫盲

    第二届深圳区块链技术与应用大会暨展览会,深圳区块链存储与IPFS技术应用大会暨展览会于2019年4月9日在深圳会展中心6号馆举行.那么这个IPFS是什么?和区块链有什么关系?有什么用?又怎么用呢?接下 ...

  6. rest-framework基本组件—主要看频率

    添加节流 自定义节流的方法  限制60s内只能访问3次 (1)API文件夹下面新建throttle.py,代码如下: # utils/throttle.py from rest_framework.t ...

  7. echarts 自适应方法 x和y x2和y2

    grid:{ x:65, y:20, x2:30, y2:30},

  8. editorconfig使用

    //是否是顶级配置文件,设置为true的时候才会停止搜索.editorconfig文件 root = true [*] //缩进方式tab" | "space indent_sty ...

  9. Hibernate的增删改查（事务）

    Hibernate的事务: 1. 设置事务隔离级别都是用  自己进行存储的 二进制      十进制 read uncommitted   读未提交        0001         1 rea ...

  10. 学习python D1

    shell脚本最擅长移动文件和替换文本,并不适合GUI界面或者游戏开发,Python是一种解释型语言,在程序开发阶段可以为你节省大量时间 Python2的用户输入需要用raw_input()而非inp ...