最新消息:周一至周五21:30分QQ群(161510483)直播,零基础免费学谷歌SEO,WEB前端,PHP入门教程

CSS排版:边距

CSS学习系列 林雍岷 244浏览

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;

转载请注明:林雍岷 » CSS排版:边距