盒模型代码简写

Posted Rinpe

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了盒模型代码简写相关的知识,希望对你有一定的参考价值。

还记得在讲盒模型时外边距(margin)、内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的:上右下左。具体应用在margin和padding的例子如下:

margin:10px 15px 12px 14px;/*上设置为10px、右设置为15px、下设置为12px、左设置为14px*/

通常有下面三种缩写方法:

1、如果top、right、bottom、left的值相同,如下面代码:

margin:10px 10px 10px 10px;

可缩写为:

margin:10px;

2、如果top和bottom值相同、left和 right的值相同,如下面代码:

margin:10px 20px 10px 20px;

可缩写为:

margin:10px 20px;

3、如果left和right的值相同,如下面代码:

margin:10px 20px 30px 20px;

可缩写为:

margin:10px 20px 30px;

注意:padding、border的缩写方法和margin是一致的。

以上是关于盒模型代码简写的主要内容,如果未能解决你的问题,请参考以下文章

盒模型

盒模型基本概念

微搭低代码样式开发-盒模型介绍

彻底搞懂标准盒模型和怪异盒模型

彻底搞懂标准盒模型和怪异盒模型

彻底搞懂标准盒模型和怪异盒模型