CSS 彻底理解margin与padding

2023-10-12 07:35| 来源: 网络整理| 查看: 265

我们在刚开始接触CSS的时候总是被margin和padding闹的晕头转向，什么时候设置margin，什么时候设置padding，不是太清楚，设置了以后在界面上看到的效果也差不多呀。

如何理解margin与padding呀，我们首先可以想象一下我们手里拿了一个钻戒要向女朋友求婚，一般求婚的时候钻戒都是在盒子里放着呢，我们要有盒子的概念，钻戒一般都放在盒子的中央，没有哪家的钻戒是把盒子占的满满的，我们的钻戒就放在盒子的中央，占了很小的一块面积，其它的地方都是有填充物的，我们可以把这个填充物简单的理解为padding也就是钻戒距离盒子内边缘的距离，这时候我们想把钻戒放在桌子上，放在桌子的什么位置呢，左上角，右上角，还是中间，我们姑且把他放在中间把，那么我们这个钻戒盒子距离桌子边缘的距离就是margin，那么很简单我们那个钻戒的盒子就是我们所说的border。

钻戒.png

通过上面的图片我们就可以很直观的看出margin与padding的区别。

margin属性可以为给定元素设置所有四个（上下左右）方向的外边距属性。四个外边距属性设置分别是： margin-top， margin-right， margin-bottom 和 margin-left 。指定的外边距允许为负数。

1、指定一个值时该值指定四个边到父内边距的距离

margin: 100px; marginPadding1.png

2、指定两个值时第一个值指定上下第二个指定左右

margin: 100px 20px; margin2.png

3、指定三个值时第一个指定上边、第二个指定左右两边、第三个指定下边

margin: 100px 20px 10px; margin3.png

4、指定四个值时分别为上右下左（顺时针顺序）

margin: 100px 20px 10px 50px; margin4.png

padding属性设置一个元素的内边距，padding 区域指一个元素的内容和其边界之间的空间，该属性不能为负值。四个外边距属性设置分别是： padding-top， padding-right， padding-bottom 和 padding-left

1、指定一个值时该值指定内容到四个边的内边距

padding: 50px; marginPadding1.png

2、指定两个值时第一个值指定内容到上下两边的内边距第二个指定内容到左右两边的内边距

padding: 50px 20px; padding2.png

3、指定三个值时第一个指定内容到上边的内边距.第二个指定内容到左右两边第三个指定内容到下边的距离

padding: 50px 20px 10px; padding3.png

4、指定四个值时分别为上右下左（顺时针顺序）

padding: 50px 20px 10px 5px; padding4.png

以上的样式设定了这个控件的宽度为200px、高度为200px，在改变margin和padding时内容区的大小是不变的

【本文地址】

公司简介

联系我们