CSS的Padding, Margin, Border 的区别

HTML的元素

HTML语言定义了一系列的标签元素，　比如div, hr , ul , a 等等。粗略来分，有以下几种类型：

块状元素：以块的形式显示一个矩形区域，可以定义自己的高度和宽度，可以作为容器包含其他的块状元素和内联元素。
比如： div,p,ul,ol,li,dl,dt,dd,form,hr,table,tr,td,h1-h6,filedset,caption
内联元素（也称行内元素）：在一行逐个进行显示，不能定义高度和宽度。
比如： a,strong,b,i,em,span,label,img,input
内联块元素：具备内联元素和块状元素的特点，比如 img,input,textarea

什么是盒子模型(Box Model)

块状元素可以想象成一个正方形的区块，这个区块在页面展现时，势必存在一些和其他区块之间的间隔问题， W3C 组织定义的把网页的对象放在一个盒子（box）中，也就是常说的盒子模型（Box Model）。
盒子模型定义了四个区域：

content 内容
padding 内边距 , 边框到层的内容之间的空白
border 边框
margin 外边距：边框以外留的空白
内容就是中间正方形的部分，围绕该正方形的边框和边距有上下左右四个方向，如下图所示：

margin 的作用及如何定义

margin 是边框以外留的空白，用于定义块级元素之间的距离
margin 是透明不可见
margin 的定义包含4个方向。
比如： margin: 10px 10px 10px 10px;
这是个数字分别定义了上、右、下、左是个方向的距离，为什么是上、右、下、左呢？看下面的图：

从上开始，按照顺时针的方向性。

当各方向或部分方向的值相同时，也可以进行简写，类似

全部相同，可简写 margin: 10px;
当上下，左右一致，可简写 margin: 10px 10px;，第一个用于上下，第二个用于左右。
margin: 10px 10px 10px;，有三个值的状况，第一个用于上，第二个用于左右，第三个用于下。

padding 的作用及如何定义

块级元素内部，内容与边框之间的距离。定义示例如下：

padding: 10px; 一个：，上下左右
padding: 10px 10px; 二个：第一个上下，第二个左右
*padding: 10px 10px 10px; 三个：一个上，第二个左右，第三个下
*padding: 10px 10px 10px 10px; 四个：上右下左

boder 的定义也是类似，这里就不赘述了。

【补充】背景

处理边框、边距之外，盒子模型还定义了背景色和背景图片。如下图所示。

CSS的Padding, Margin, Border 的区别相关推荐

图解CSS的padding,margin,border属性
图解CSS的padding,margin,border属性(详细介绍及举例说明) 图解CSS的padding,margin,border属性 W3C 组织建议把所有网页上的对像都放在一个盒(box)中 ...
CSS中的margin、border、padding区别 CSS padding margin border属性详解
图解CSS padding.margin.border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层 ...
CSS padding margin border属性讲解
把所有网页上的对象都放在一个盒(box)中 ,设计师可以通过创建定义来控制这个盒的属性,这些对象包括段落.列表.标题.图片以及层. 盒模型主要定义四个区域: 内容(content) 内边距(paddi ...
css中padding和magin的区别
1.Margin 用来设置页面中一个元素所占空间的边缘到相邻元素之间的距离. 如果提供全部四个参数值,将按上-右-下-左的顺序作用于四边. 如果只提供一个,将用于全部的四边. 如果提供两个 ...
CSS盒子模型（border、padding、margin、圆角边框、盒子阴影、文字阴影、新闻列表综合案例、新浪导航栏案例）
1. 网页布局的本质首先利用CSS设置好盒子的大小,然后摆放盒子的位置. 最后把网页元素比如文字图片等等,放入盒子里面. 以上两步就是网页布局的本质 2. 盒子模型(Box Model) 盒子模型 ...
CSS中：margin和padding的区别 margin:auto与margin: 0 auto区别
css中padding和margin的区别 margin 外边距 border 边框 padding 内边距 padding-left:10px; 左内边距.padding-right:10px; 右 ...
懂点前端——对CSS中的Padding、Border、Margin属性的理解
作为一个志在AIot(实际在写上位机程序.嵌入式代码)的工程师,怎么又关心起前端来了呢?怎么说呢,前端的应用范围广啊,从高大上的算法.富有科技感的物联网应用到无处不在的Web应用,只要是需要和终端用户 ...
一天搞定CSS：盒模型content、padding、border、margin--06
1.盒模型网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin), CSS盒子模式都具备这些属性.这些属性我们可以用日常生活中的常见事物- ...
从零开始学前端 - 7. CSS盒模型 margin和padding详解
作者: 她不美却常驻我心博客地址: https://blog.csdn.net/qq_39506551 微信公众号:老王的前端分享每篇文章纯属个人经验观点,如有错误疏漏欢迎指正.转载请附带作者信息 ...

CSS的Padding, Margin, Border 的区别

HTML的元素

什么是盒子模型(Box Model)

margin 的作用及如何定义

padding 的作用及如何定义

【补充】背景

CSS的Padding, Margin, Border 的区别相关推荐

最新文章

热门文章

CSS的Padding, Margin, Border 的区别

HTML的元素

什么是盒子模型(Box Model)

margin 的作用及如何定义

padding 的作用及如何定义

【补充】 背景

CSS的Padding, Margin, Border 的区别相关推荐

最新文章

热门文章

【补充】背景