CSS中margin和padding的区别浅析

这篇文章主要介绍了CSS中margin和padding的区别浅析,在开发过程应该对大家很有帮助,小编结合实例代码给大家介绍的非常详细,需要的朋友可以参考下

在CSS中margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离。在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离。

下面讲解 padding和margin常用的用法

一、padding

1、语法结构

(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; 上、右、下、左内边距

2、可能取的值

(1)length 规定具体单位记的内边距长度

(2)% 基于父元素的宽度的内边距的长度

(3)auto 浏览器计算内边距

(4)inherit 规定应该从父元素继承内边距

3、浏览器兼容问题

(1)所有浏览器都支持padding属性

(2)任何版本IE都不支持属性值“inherit”

二、margin

1、语法结构

(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; 上、右、下、左外边距

2、可能取的值

(1)length 规定具体单位记的外边距长度

(2)% 基于父元素的宽度的外边距的长度

(3)auto 浏览器计算外边距

(4)inherit 规定应该从父元素继承外边距

3、浏览器兼容问题

(1)所有浏览器都支持margin属性

(2)任何版本IE都不支持属性值“inherit”

三、margin和padding的区别用图表示为

以上所述是小编给大家介绍的CSS中margin和padding的区别,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

到此这篇关于CSS中margin和padding的区别浅析就介绍到这了。青春是火,燃烧我们年轻的光华,青春是灯,照亮我们美丽的豆蔻年华,青春是路,指引我们从青涩走向成熟……更多相关CSS中margin和padding的区别浅析内容请查看相关栏目,小编编辑不易,再次感谢大家的支持!

您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案

Flex布局史上最简单使用语法教程

新的CSS 伪类函数 :is() 和 :where()示例详解

纯CSS打字动画的如何实现示例

CSS浮动引起的高度塌陷问题