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

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

实现自适应的等比例矩形效果：
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世界》

个人简介

我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，
但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题