CSS填充属性设置

绝地灬酷狼 2023-02-15 07:50 17阅读 0赞

CSS填充属性设置有时会令人困惑，因为它可以同时接受1个值，2个值，3个或4个值。

例如，以下所有填充属性设置均有效。

padding: 10px;
    padding: 10px 8px;
    padding: 10px 8px 10px;
    padding: 10px 8px 10px 9px;

## CSS填充规则。 ##

1）CSS填充顺序如下：

padding: top  right  bottom left

2）未声明值取自相反侧

## CSS填充示例 ##

## 1）填充：10px 8px 10px 9px; ##

这四个值很容易理解。

结果是顶部10像素，右侧8像素，底部10像素和左侧9像素

## 2）内边距：10px 8px; ##

这两个值也很清楚。 在这里，我们声明顶部为10px，右边为8px。 遵循填充规则– *未声明的值是从相对的一侧获取的* ，“顶部”值将分配给“底部”，“右侧”值也将分配给“左”。

结果是顶部10像素，右侧8像素，底部10像素和左侧8像素

## 3）padding：10px 8px 10px; ##

这是最令人困惑的设置。 在这里，我们声明顶部为10px，右侧为8px，底部为10px，请遵循填充规则– *未声明的值是从相反的一侧获取的* ，“ Right”值将分配给“ Left”。

结果是顶部10px，右侧8px，底部10px和左侧8px

## 4）填充：10px； ##

此属性设置有些特殊，该设置将应用于所有上，右，下和左值。

结果是顶部10像素，右侧10像素，底部10像素和左侧10像素

## 结论 ##

实际上，完成这一行CSS填充属性设置的另一种方法是使用  
1）顶部填充：  
2）向右填充：  
3）底部填充：  
4）向左填充：

例如，

padding: 10px 8px 10px 9px;

相当于

padding-top:10px; 
    padding-right:8px;
    padding-bottom:10px;
    padding-left:9px;

我更喜欢多行CSS填充属性设置（例如padding-top或padding-right），代码干净且易于维护。 为什么这么多的Web开发人员想要使事情变得复杂？ 一线填充属性会使它更专业吗？

标签： [CSS][]

> 翻译自: [https://mkyong.com/css/css-padding-property-setting-unofficial-guide/][https_mkyong.com_css_css-padding-property-setting-unofficial-guide]

[CSS]: https://mkyong.com/tag/css/
[https_mkyong.com_css_css-padding-property-setting-unofficial-guide]: https://mkyong.com/css/css-padding-property-setting-unofficial-guide/

发表评论取消回复

表情：

评论列表（有 0 条评论，17人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS table属性设置及代码示例

CSS中用于控制表格(`table`)的样式属性众多，它们帮助开发者调整表格的外观与布局。下面是一些关键的CSS属性及其示例代码和注意事项

ゝ一世哀愁。/ 2024年05月28日 10:12/ 0 赞/ 200 阅读

相关 CSS给元素设置ID属性

给元素设置ID属性每一个 HTML 元素都可以具有 id 属性。 id 属性规定 HTML 元素的唯一的 id。 id 属性是唯一的。虽然浏览器不会强制唯一，但

超、凢脫俗/ 2024年03月29日 16:01/ 0 赞/ 200 阅读

相关用CSS填充

The padding property sets the padding space on all sides of an element. The padding area

红太狼/ 2023年03月05日 09:38/ 0 赞/ 66 阅读

相关 CSS填充属性设置

CSS填充属性设置有时会令人困惑，因为它可以同时接受1个值，2个值，3个或4个值。例如，以下所有填充属性设置均有效。 padding: 10px; pad

绝地灬酷狼/ 2023年02月15日 07:50/ 0 赞/ 18 阅读

相关 LayoutInflater 填充器填充布局，布局属性失效问题

无意间看到一个帖子，标题：一个难倒 3年 android开发经验 ” 工程师 ” 的 “bug”，链接地址：[http://www.2cto.com/kf/201602/489

柔情只为你懂/ 2022年08月20日 07:27/ 0 赞/ 277 阅读

相关 css边框属性border，css布局设置，浮动属性，css转换display

7 边框属性所有的thml标签都是有边框的不过默认是看不见 Border是边框例如 border：1px solid red ，对应的属性是边框粗是1像素

迷南。/ 2022年06月06日 03:06/ 0 赞/ 443 阅读

相关 jQuery-CSS属性查询与设置

jQuery css() 方法 jQuery css() 方法 css() 方法设置或返回被选元素的一个或多个样式属性。返回 CSS 属性如需返回指定的

傷城~/ 2022年04月16日 00:07/ 0 赞/ 355 阅读

相关【CSS】padding（填充）

CSS padding（填充）是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距。 padding（填充）当元素的 padding（填充）内边距被清

绝地灬酷狼/ 2022年03月22日 14:01/ 0 赞/ 331 阅读

相关 css让背景图片拉伸填充的属性

比如一个容器(body,div,span)中设定一个背景。这个背景的长宽值在css2.1之前是不能被修改的。　　所以实际的结果是只能重复显示，所以出现了repe

曾经终败给现在/ 2021年06月24日 14:35/ 0 赞/ 677 阅读

相关 thymeleaf设置css样式，矩形百分比填充背景色

对调查结果进行统计的页面，在div的style中拼接后台参数，显示百分比 <tr th:each="option:{obj.list}"> <td th:

àì夳堔傛蜴生んèń/ 2021年06月11日 15:13/ 0 赞/ 993 阅读