HTML中的padding和margin

2024-05-13 10:15:13

padding

（内边距）

语法：

（1）padding-left:10px; 左内边距

（2）padding-right:10px; 右内边距

（3）padding-top:10px; 上内边距

（4）padding-bottom:10px; 下内边距

（5）padding：10px; 四边统一内边距

（6）padding:10px 20px; 上下、左右内边距

（7）padding:10px 20px 30px; 上、左右、下内边距

（8）padding:10px 20px 30px 40px; 上、右、下、左内边距

作用描述：

是指该元素边框线以内的距离，设定之后，该元素内部的非漂浮或定位元素都会距离该元素的边框距离该设定的值的长度；
当设定该值后，如果设定的值和元素内部已有元素的高度或宽度超出本身的长时，会自动将长度变长以适应内容，所以此时应当在样式中加入box-sizing:border-box;属性，将边框长宽固定为边框所定值；
不可以设置负值，不报错，但没有效果；

margin

（内边距）

语法：

（1）margin-left:10px; 左外边距

（2）margin-right:10px; 右外边距

（3）margin-top:10px; 上外边距

（4）margin-bottom:10px; 下外边距

（5）margin:10px; 四边统一外边距

（6）margin:10px 20px; 上下、左右外边距

（7）margin:10px 20px 30px; 上、左右、下外边距

（8）margin:10px 20px 30px 40px; 上、右、下、左外边距

作用描述：

是指该元素边框线以外的距离，设定之后，该元素的外边距离所设置方向的元素会相应增加或减少；
可以设置负值，会向相反方向移动；

margin是盒模型的外边距，padding是盒模型的内边距；

用margin时，最好给父级元素加上overflow：hidden；（溢出隐藏）

用padding时，最好给自身加上box-sizing：border-box；（固定边框）

转载于:https://www.cnblogs.com/wykid/p/8191025.html

HTML中的padding和margin相关推荐

CSS 盒子模型（Box model）中的 padding 与 margin
编辑自 http://www.x6x8.com/IT/199.HTML 本文将讲述 HTML 和 CSS 的关键-盒子模型 (Box model) .理解 Box model 的关键便是 margin ...
html中padding和margin的区别和用法与存在的bug消除
关于margin: 在需要border外侧添加距离时. 空白处不需要背景时. 相连的两个部分的地方需要加外边的边距时使用. 关于padding: 在需要border内侧添加距离时. 空白处需要背景时. ...
[css] css中padding和margin是相对于父元素还是子元素呢？
[css] css中padding和margin是相对于父元素还是子元素呢? padding就是往自己身体里塞东西(盒子里面),margin就是穿衣服(盒子外面). ==>padding相对于子 ...
java中内边距跟外边距,padding和margin——内边距和外边距
一.padding--内边距(内填充) 1.1.padding 简写属性在一个声明中设置所有填充属性.该属性可以有1到4个值. div.outer{ width: 400px; height: 400 ...
jsp+左间距_jsp 中padding 与margin的区别
本文向大家简单介绍一下 Margin 和 Padding 属性中四个值的先后顺序及区别, Margin 和 Padding 属性中四个值的顺序为:上右下左,按照顺时针方向罗列的. AD: 你对 Mar ...
【css】padding 和 margin的区别
css中有有一对经常是一起出现的属性:padding和margin,接下来我们以一个例子来看一下两个属性的作用及其区别. 实例演示: 使用属性前: 代码实现: <!DOCTYPE html> ...
border，padding，margin盒模型理解
安静的敲着键盘,已势不可挡的姿势逼近php,我想我是一个幸福的人,未来不可期,做好现在,偶尔写着自己能看懂的API,慢慢悠悠的回味一下前端基础知识. 本文盒模型理解. <!DOCTYPE htm ...
CSS 盒子模型（border、padding、margin)
CSS盒子模型 Css盒子模型本质上是一个盒子,封装周围的html元素,他包括边框.内容.外边距.内边距. 1.边框边框(border)可以设置元素的边框,他由三部分组成:边框宽度(粗细).边框样式 ...
html区域框什么意思,如何理解【没有padding 、margin、border的情况下，行内框等于内容区域】这句话？...
文章一:"深入理解CSS中的行高":http://www.cnblogs.com/rainma... 文章二:"CSS行高--line-height":http ...

最新文章

热门文章