[css] 第56天 margin和padding使用的场景有哪些？

[haizhilin2013]

第56天 margin和padding使用的场景有哪些？

[encountermm]

margin:

     需要在border外侧添加空白时；

     空白处不需要背景（色）时；

    上下相连的两个盒子之间的空白，需要相互抵消时。

padding：

    需要在border内测添加空白时；

    空白处需要背景（色）时；

    上下相连的两个盒子之间的空白，希望等于两者之和时。

[LeiDeMing]

实现自适应的等比例矩形效果：
div { padding: 50%; }
div { padding: 25% 50%; } //宽高比为 2:1 的矩形效果

实现头图高度天然等比例缩小效果
.box {
padding: 10% 50%;
position: relative;
}
.box > img {
position: absolute;
width: 100%; height: 100%;
left: 0; top: 0;
}

padding 属性和 background-clip 属性配合，可以在有限的标签下实现一些 CSS 图形绘制效果

margin 可以实现很多流体布局
margin 外部尺寸实现等高布局
实现垂直居中布局

from《css世界》

[smile-2008]

margin:

     需要在border外侧添加空白时；

     空白处不需要背景（色）时；

    上下相连的两个盒子之间的空白，需要相互抵消时。

padding：

    需要在border内测添加空白时；

    空白处需要背景（色）时；

    上下相连的两个盒子之间的空白，希望等于两者之和时。

[zxcdsaqwe123]

margin用于给元素定位，padding用于改变元素的大小（除非使用了box-sizing：border-box）