第56天 margin和padding使用的场景有哪些?
Activity
encountermm commentedon Jul 3, 2019
margin:
需要在border外侧添加空白时;
空白处不需要背景(色)时;
上下相连的两个盒子之间的空白,需要相互抵消时。
padding:
需要在border内测添加空白时;
空白处需要背景(色)时;
上下相连的两个盒子之间的空白,希望等于两者之和时。
LeiDeMing commentedon Nov 7, 2019
实现自适应的等比例矩形效果:
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 commentedon Dec 1, 2020
zxcdsaqwe123 commentedon Nov 14, 2021
margin用于给元素定位,padding用于改变元素的大小(除非使用了box-sizing:border-box)