CSS排版:边距

css边距

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;

Last modified: 2019年8月31日

前一篇

CSS学习系列

CSS排版:数值和单位

CSS单位:对于网页布局的单位,只知道 px 是仅仅不够的,还需要知道其他几个比较常见的单位,特别是css3推出的一些新的度量单位, em是一种相对单位,它相对于父元素的字体大小,设置排版的font-size和line-height属性时.

...

后一篇

CSS学习系列

CSS排版:响应式布局

CSS响应式:基本布局已经完成,确保自动适配各种屏幕,在不同的屏幕效果看起来效果好。学习使用media query 自动调整显示效果。媒体(media)查询在 CSS3 上有介绍:CSS3 @media 查询。使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。

...