Last Updated on
css边距:在CSS中margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离。在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离。学习如何通过外边距(margin)和内边距(padding)属性让元素之间实现间隔。用边框属性,非常有用的box-sizing属性。
margin用于设置对象标签之间距离间隔,比如2个上下排列的DIV盒子,我们就可以使用margin样式实现上下2个盒子间距。Margin呈现是位于对象边框外侧,紧贴于边框,marign与padding位置却相反css padding却是紧贴边框位于边框内侧。
border-box
width 和 height 属性包括内容,填充和边框,但不包括边距;
width = border + padding + 内容的 width,
height = border + padding + 内容的 height。
content-box
width 与 height 只包括内容的宽和高, 不包括边框(border),内边距(padding),外边距(margin)。
尺寸计算公式:width = 内容的宽度,height = 内容的高度。宽度和高度都不包含内容的边框(border)和内边距(padding)。
1、parent_div,middle_div,child_div
2、.wrap
padding:5rem;
3、.content-left
padding-left:5rem
4、.content-right
padding-left:5rem
5、.wrapper
box-sizing:border-box;
border-style:solid;
border-width:0.1875rem;
6、header
padding:2rem
7、body
margin:0
8、.img-border
box-sizing:border-box;
padding:0.7rem;
border-style:solid;
border-width:0.1875rem;
9、.content-left > :first-child
margin-top:0;