3.1 边框

HTML border padding margin border-radius
其他的border-width 还有border-style都是可以按这种方式进行设置

还可以统一简写成
border:1px solid red;

3.2 外边距
盒子和盒子之间的距离,margin
四个方向都可以设置,设置方式和边框一样

Margin妙用
网页居中对齐 左右的这个值使用auto,使得元素左右居中显示
HTML border padding margin border-radius
3.3 padding 内边距
设置的是内容和边框之间的距离
HTML border padding margin border-radius
HTML border padding margin border-radius

Padding会撑大盒子的大小,要保持原样,可以自己计算新width的大小,减去padding的值

解决方式二:
推荐的方式:
Box-sizing:border-box 指定width height的基准是边框之间的距离,默认是内容的距离

默认值;content-box

3.4 圆角边框 border-radius
HTML border padding margin border-radius
HTML border padding margin border-radius

相关文章: