一、padding

1、定义和用法

padding 简写属性在一个声明中设置所有内边距属性。

2、说明

这个简写属性设置元素所有内边距的宽度，或者设置各边上内边距的宽度。行内非替换元素上设置的内边距不会影响行高计算；因此，如果一个元素既有内边距又有背景，从视觉上看可能会延伸到其他行，有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。

注意：不允许使用负值。

padding:10px 5px 15px 20px;

上内边距是 10px
右内边距是 5px
下内边距是 15px
左内边距是 20px

padding:10px 5px 15px;

上内边距是 10px
右内边距和左内边距是 5px
下内边距是 15px

padding:10px 5px;

上内边距和下内边距是 10px
右内边距和左内边距是 5px

padding:10px;

所有 4 个内边距都是 10px

3、可能的值

值	描述
auto	浏览器计算内边距。
length	规定以具体单位计的内边距值，比如像素、厘米等。默认值是 0px。
%	规定基于父元素的宽度的百分比的内边距。
inherit	规定应该从父元素继承内边距。

当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。单独使用 padding 属性可以改变上下左右的填充。

4、padding在块元素、内联元素中的区别

HTML里分两种基本元素，即block和inline。block元素另起一行开始，并独占一行。inline元素则同其他inline元素共处一行。

（1）在块元素中：

padding在块级元素下，上下左右可以随意设定，会对元素内部发生改变。

（2）在内联元素中：

行内非替换元素上设置的内边距不会影响行高计算；因此如果一个元素既有内边距又有背景，从视觉上看可能会延伸到其他行，有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值，行内元素的padding元素，只有padding-left和padding-right有效果，上下不识别。

二、margin

1、定义和用法

margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。

2、说明

这个简写属性设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。

块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。

注意：允许使用负值。

margin:10px 5px 15px 20px;

上外边距是 10px
右外边距是 5px
下外边距是 15px
左外边距是 20px

margin:10px 5px 15px;

上外边距是 10px
右外边距和左外边距是 5px
下外边距是 15px

margin:10px 5px;

上外边距和下外边距是 10px
右外边距和左外边距是 5px

margin:10px;

所有 4 个外边距都是 10px

3、可能的值

值	描述
auto	浏览器计算外边距。
length	规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。
%	以包含元素宽度的百分比指定外边距。
inherit	规定应该从父元素继承外边距。

4、margin在块元素、内联元素中的区别

HTML里分两种基本元素，即block和inline。block元素另起一行开始，并独占一行。inline元素则同其他inline元素共处一行。

（1）在块元素中：

margin在块级元素下，上下左右可以随意设定。且块级元素的margin的参照基准是前一个元素即相对于自身之前的元素有margin距离。如果元素是第一个元素，则就是相对于父元素的margin距离。

（2）在内联元素中：

margin-top和margin-bottom对内联元素（对行）的高度没有影响，如果你要改变内联元素的行高即类似文本的行间距，那么只能使用这三个属性：line-height，fong-size，vertical-align。请记住，这个影响内联元素高度的是line-height而不是height。

CSS：padding和margin相关推荐

CSS 中的 margin、border、padding 区别（内边距、外边距）
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 图解CSS padding.margin.border属性 W3C组织建议把所有网页上的对像都放在一 ...
CSS中的margin、border、padding区别 CSS padding margin border属性详解
图解CSS padding.margin.border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层 ...
【css】padding 和 margin的区别
css中有有一对经常是一起出现的属性:padding和margin,接下来我们以一个例子来看一下两个属性的作用及其区别. 实例演示: 使用属性前: 代码实现: <!DOCTYPE html> ...
CSS盒子模型（border、padding、margin、圆角边框、盒子阴影、文字阴影、新闻列表综合案例、新浪导航栏案例）
1. 网页布局的本质首先利用CSS设置好盒子的大小,然后摆放盒子的位置. 最后把网页元素比如文字图片等等,放入盒子里面. 以上两步就是网页布局的本质 2. 盒子模型(Box Model) 盒子模型 ...
CSS 外补白(Margin) 内补白(Padding) 边框属性定位（positioning）属性布局(layout)属性
CSS 布局(Layout) Properties 属性 CSS Version 版本 Inherit From Parent 继承性 Description 简介 display CSS1/CSS2 ...
CSS 盒子模型（Box model）中的 padding 与 margin
编辑自 http://www.x6x8.com/IT/199.HTML 本文将讲述 HTML 和 CSS 的关键-盒子模型 (Box model) .理解 Box model 的关键便是 margin ...
[css] css中padding和margin是相对于父元素还是子元素呢？
[css] css中padding和margin是相对于父元素还是子元素呢? padding就是往自己身体里塞东西(盒子里面),margin就是穿衣服(盒子外面). ==>padding相对于子 ...
[css] 行内元素可以设置padding和margin吗？
[css] 行内元素可以设置padding和margin吗? 行内元素的纵向padding和margin都是不考虑的,这是css规范定义的. inline元素确实可以设置垂直方向的 padding 和 ...
CSS中：margin和padding的区别 margin:auto与margin: 0 auto区别
css中padding和margin的区别 margin 外边距 border 边框 padding 内边距 padding-left:10px; 左内边距.padding-right:10px; 右 ...
取消UL和OL符号以及padding和margin后恢复默认值的CSS
原文:https://www.cnblogs.com/zhaiqianfeng/archive/2012/06/28/4616645.html 之前取消UL和OL符号以及padding和margin, ...

CSS：padding和margin

一、padding

1、定义和用法

2、说明

3、可能的值

4、padding在块元素、内联元素中的区别

二、margin

1、定义和用法

2、说明

3、可能的值

4、margin在块元素、内联元素中的区别

CSS：padding和margin相关推荐

最新文章

热门文章