padding属性的书写格式总共有以下几种：
padding:10px; 意思是上下左右值全是10px
padding:5px 10px; 意思是上下为5px，左右为10px;
padding:1px 2px 3px 4px; 这个写法意思是：上为1px，右为2px，下为3px，左为4px
padding:5px 10px 7px; 这种写法意思是：上为5px，左右为10px，下为7px
（注意：padding后面4个值定义的顺序分别为：上 右 下 左）
而padding-top或者padding-bottom这种写法，只是单方面的定义了一个方向的值，这样写会增加CSS代码的长度，增加CSS样式的代码量，拖慢页面的加载速度。
扩展资料：
注意：padding后面4个值定义的顺序分别为：上 右 下 左
而padding-top或者padding-bottom这种写法，只是单方面的定义了一个方向的值，这样写会增加CSS代码的长度，增加CSS样式的代码量，拖慢页面的加载速度。
box-sizing的CSS属性是用来改变默认的CSS框模型，用于计算元素的宽度和高度。它可以使用这个属性来模拟浏览器的行为不正确支持CSS盒模型的规范。
说到 IE 的 bug，在 IE6以前的版本中，IE对盒模型的解析出现一些问题，跟其它浏览器不同，将 border 与 padding 都包含在 width 之内。而另外一些浏览器则与它相反，是不包括border和padding的。
在开发的过程中会发现，有时候，如果对页面中的大区域进行设置时，将border、padding计算到width和height之内，反而更灵活。但W3C的 CSS2.1规范却规定了他们并不能被包含其中。考虑到这个问题，css3中引入了一个新的属性：box-sizing，它具有“content-box”和”border-box“两个值。
Vue实践-CSS样式position/display/float属性对比使用
padding:0px,5px;就是上下为0，左右为5；
padding:10px 5px 15px;就是上位10，左右为5，下为15；
padding:0px,5px,10px,15px;就是上为0，右为5，下为10，左为15，
padding的顺序是顺时针方向的
在CSS中,BOX的Padding属性的数值赋予顺序为
padding:5px 10px; 意思是上下为5px，左右为10px;padding:1px 2px 3px 4px; 这个写法意思是：上为1px，右为2px，下为3px，左为4px padding:5px 10px 7px; 这种写法意思是：上为5px，左右为10px，下为7px （注意：padding后面4个值定义的顺序分别为：上 右 下 左）而padding-top或者paddi...
在CSS中,BOX的Padding属性的数值赋予顺序为
padding:5px 10px;上下5px 左右10px padding:5px 10px 15px;上5px 右10px 下15px 左因为缺省与右相等，则为10px padding:5px 10px 15px 20px;上5px 右10px 下15px 左20px
css中box的padding属性包括的属性有
填充、上填充、底填充、左填充、右填充。CSS中的box的padding属性包括填充、上填充、底填充、左填充和右填充。填充属性用于设置元素内容与边框之间的空白区域，可以通过设置不同的填充值来调整元素的内部间距。上填充、底填充、左填充和右填充属性则分别用于单独设置元素上方、下方、左侧和右侧的填充值，可以...
css中box的padding属性包括的属性有
1、左补距离(设置距左内边距)。2、头顶补距离(设置距顶部内边距)。3、右补距离(设置距右内边距)。4、底补距离(设置距低内边距)。
一文搞定background属性及属性值,css背景属性全家桶
background提供简写用法，即在一个声明中可设置所有的背景属性。所有属性如下：...建议顺序：...背景图片与img标签的对比：背景图片不占用content内容部分，而img标签会占用。背景图片大小如果超出盒子是不会显示的，而img标签如果超出父级盒子默认是会超出显示的。何时使用背景图片，何时使用img标签取决于...
盒子模型介绍
概念: 盒子模型(Box Model)就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的 容器。 作用: CSS 围绕这些盒子产生了一种“盒子模型”概念,通过定义一系列与盒子相关的属性,可以极大地 丰富 和 促进 各个盒子乃至整个 HTML 文档的 表现效果和布局结构 。 组成: 每个盒子都由元素的内容(content...
浅谈css布局规则
CSS中组成一个块级盒子需要: Contentbox:?这个区域是用来显示内容,大小可以通过设置?width?和?height. Paddingbox:?包围在内容区域外部的空白区域;?大小通过?padding?相关属性设置。 Borderbox:?边框盒包裹内容和内边距。大小通过?border?相关属性设置。 Marginbox:?这是最外面的区域,是盒子和其他元素之间的空白区域...
css手册总结(二)
取值： border-box：从border区域（含border）开始显示背景图像。 padding-box：从padding区域（含padding）开始显示背景图像。 （默认） content-box：从content区域开始显示背景图像。注意，如果设置background-origin后，设置background-position会相对于background-origin设置的位置做参考来偏移背景图...
什么是盒模型
属性:box-sizing: border-box(怪异盒模型)\/content-box(标准盒模型) 相较而言,标准盒模型的组成属性是分开组成的,而怪异盒模型的content、border、padding属性可以看做一个组成部分,再加上margin属性由此构成了整个怪异盒模型 从盒模型的定义中我们了解到了盒模型是由4个部分组成,那么盒子的大该如何计算呢?由定义我...
css3新增属性有哪些?css3中常用的新增属性总结
1、css3新增属性之text-shadow：文本阴影 说明:(1) 和是可选的, 当未指定时,将使用文本颜色; 当未指定时, 半径值为0；(2) shadow可以是逗号分隔的列表, 如:text-shadow: 2px 2px 2px #ccc, 3px 3px 3px #ddd;(3) 阴影效果会按照shadow list中指定的顺序应用到元素上；(4) 这些阴影...
