关于padding和margin

1.padding（内边距）

padding即内容与边框的距离

padding会影响实际上盒子的大小，下面的实例会体现出这一点

padding简写属性：

padding：5px；
上下左右内边距都是5px

这有一个高度是100px，宽度为100px的盒子。上下左右内边距都是5px，此时盒子的宽度应该是110px，高度为110px；

2. padding：5px 10px；上下内边距是5px，左右内边距是10px

3. padding：5px 10px 20px；上内边距是5px，左右内边距是10px，下内边距是20px

4. padding：5px，10px，20px，30px；上内边距是5px，右内边距是10px，下内边距是20px，左内边距是30px；注意顺序是顺时针方向

面对这种padding撑开盒子的情况的解决方案：宽高减去内边距。

使用padding：5px；举例：

此时内边距是5px，要保持盒子宽高为100px，只需要将宽高个减去10px就行。

2.margin（外边距）

margin即控制盒子与盒子之间的距离

margin 的简写属性与padding一致

2.1外边距的典型应用

块级盒子水平居中

两个条件：

必须指定宽度
左右外边距设置为auto

关于padding和margin相关推荐

【css】padding 和 margin的区别
css中有有一对经常是一起出现的属性:padding和margin,接下来我们以一个例子来看一下两个属性的作用及其区别. 实例演示: 使用属性前: 代码实现: <!DOCTYPE html> ...
CSS 盒子模型（Box model）中的 padding 与 margin
编辑自 http://www.x6x8.com/IT/199.HTML 本文将讲述 HTML 和 CSS 的关键-盒子模型 (Box model) .理解 Box model 的关键便是 margin ...
border，padding，margin盒模型理解
安静的敲着键盘,已势不可挡的姿势逼近php,我想我是一个幸福的人,未来不可期,做好现在,偶尔写着自己能看懂的API,慢慢悠悠的回味一下前端基础知识. 本文盒模型理解. <!DOCTYPE htm ...
html中padding和margin的区别和用法与存在的bug消除
关于margin: 在需要border外侧添加距离时. 空白处不需要背景时. 相连的两个部分的地方需要加外边的边距时使用. 关于padding: 在需要border内侧添加距离时. 空白处需要背景时. ...
[css] css中padding和margin是相对于父元素还是子元素呢？
[css] css中padding和margin是相对于父元素还是子元素呢? padding就是往自己身体里塞东西(盒子里面),margin就是穿衣服(盒子外面). ==>padding相对于子 ...
[css] 行内元素可以设置padding和margin吗？
[css] 行内元素可以设置padding和margin吗? 行内元素的纵向padding和margin都是不考虑的,这是css规范定义的. inline元素确实可以设置垂直方向的 padding 和 ...
从零开始学_JavaScript_系列（六）——CSS的padding、margin、border属性超详细解释（图文）...
结论请看最后的图片关于定义: margin:层的边框以外留的空白 background-color:背景颜色 background-image:背景图片 padding:层的边框到层的内容之间的空白 ...
html+css面试题行内元素padding和margin
看到一个面试题关于行内元素span的 <style>* {padding: 0;margin: 0;}span {padding: 100px;border: 1px solid red ...
取消UL和OL符号以及padding和margin后恢复默认值的CSS
原文:https://www.cnblogs.com/zhaiqianfeng/archive/2012/06/28/4616645.html 之前取消UL和OL符号以及padding和margin, ...
从零开始学_JavaScript_系列（六）——CSS的padding、margin、border属性超详细解释（图文）
结论请看最后的图片关于定义: margin:层的边框以外留的空白 background-color:背景颜色 background-image:背景图片 padding:层的边框到层的内容之间的空白 ...

关于padding和margin

1.padding（内边距）

2.margin（外边距）

2.1外边距的典型应用

关于padding和margin相关推荐

最新文章

热门文章