宰相肚里能撑船 - 使用padding为盒子设置内边距（填充），初识HTML(5)+CSS(3)-升级版教程-慕课网

宰相肚里能撑船 - 使用padding为盒子设置内边距（填充）

元素内容与边框之间是可以设置距离的，称之为“内边距（填充）”。填充也可分为上、右、下、左(顺时针)。如下代码：

div{padding:20px 10px 15px 30px;}

效果：

顺序一定不要搞混。可以分开写上面代码：

div{
   padding-top:20px;
   padding-right:10px;
   padding-bottom:15px;
   padding-left:30px;
}

如果上、右、下、左的填充都为10px;可以这么写

div{padding:10px;}

如果上下填充一样为10px，左右一样为20px，可以这么写：

div{padding:10px 20px;}

任务

我来试一试：

给div元素设置内边距（填充）10px

?不会了怎么办

在右边编辑器的第11行，输入：

padding:10px;

问答
评论
笔记
代码

全部精华我要发布

为啥上下左右都是10PX 边距并不是一样的

最赞回答 / 柒无忧

因为内容本身有自己的样式，例如text-align默认未left，你可以设置为center就可以水平居中<...图片...> #box1 { width: 100px; height: 100px; padding:10px; border: 1px solid red; text-align:center; }

2 回答 1017 浏览

2022-04-19

请问怎样才能在<style>中写注释

最新回答 / 千与千寻l

ctrl+/

2 回答 621 浏览

2022-04-20

《信息交换用汉字编码字符集》是由中国国家标准总局1980年发布，1981年5月1日开始实施的一套国家标准，标准号是GB 2312—1980。GB2312编码适用于汉字处理、汉字通信等系统之间的信息交换，通行于中国大陆；新加坡等地也采用此编码。中国大陆几乎所有的中文系统和国际化的软件都支持GB 2312。基本集共收入汉字6763个和非汉字图形字符682个。整个字符集分成94个区，每区有94个位。每个区位上只有一个字符，因此可用所在的区和位来对汉字进行编码，称为区位码。把换算成十六进制的区位码加上2020H，...

1 回答 1193 浏览

2022-04-22

让两个盒子帖在一起

最赞回答 / 入幕三分

你们好像都没有注意他写的是“display:inline;”,把这个改成“display:inline-block;”后，然后在“#box2“加个“margin:-5px;”就行了<...图片...><...code...>你们好像都没有注意他写的是“display:inline;”,把这个改成“display:inline-block;”后，然后在“#box2“加个"margin:-5px"就行了。

8 回答 1152 浏览

2020-11-20

下面代码为什么margin-bottom以及margin-right不起作用啊？

最新回答 / 霍洛夫斯基

<head>#box2{margin-top: 10px; margin-bottom: 100px;}</style></head><body> <div id="box1">盒子1</div> <div id="box2">盒子2</div></body>这样写

2 回答 1353 浏览

2020-03-21

我没有设置盒子的weight和height，为什么他还是没有上下左右都是10px

已采纳回答 / 慕先生xuyu

你好。div没有设置宽度时，宽度为父元素的100%，即box1得宽度为body的宽度。所以padding上，下，左都展示出效果了，padding-right由于宽度过大，看不出效果

3 回答 1107 浏览

2020-02-12

盒子问题！！！

最新回答 / shakey07

line-height是文字这个元素所占的高度吧，文字本身字体高度20px，处于line-height的中线上。也就是说，文字以上border-top以下的位置是（70/2-20/2）=25px，文字下沿到box1上沿的高度是50-25=25>20，应该是放的下字的。这是我的个人理解。

2 回答 729 浏览

2020-05-19

明明设置的是上下左右10px的内边距，为什么距离不一样？

最赞回答 / 从人进化成猿

<...图片...>请看图，这应该是你预期的效果。你的代码是正确的，显示出来的结果也是正确的。你觉得不居中是因为你的内容不够。从代码上来看，设置了一个宽和高均为100px的盒子，内容与边框上下左右的距离均为10px。但是你的内容不够，所以效果不对，你多加点内容就能看到想要的效果。

10 回答 2785 浏览

2021-05-13

为何盒子会变扁？

最新回答 / sdarks

<...图片...>我直接在矩形那里右键选择审查元素，看到的结果是这样至于你说的正方形，估计是你已经改了代码。

3 回答 922 浏览

2019-07-31

不是”上右下左“的顺序吗？为什么出来的效果不是右边10px，而是左边10px呢？

最新回答 / AidenLan

任务要求写的padding:10px是上右下左所有都是10px 你只看到左边10px 但实际上右下左整体都加了10px

2 回答 1020 浏览

2019-08-17

height和line-height有啥区别？？？

最新回答 / 我爱孙佳怡

玩着玩着好像明白了，height是盒子里的空间，line-height是里面具体内容的位置

1 回答 932 浏览

2019-05-28

为什么元素内容不在边框中间呢

最赞回答 / 小小铁头娃

那是因为你已经设定盒子的尺寸是100×100。而后面padding：10px只能控制左填充距离10，上填充距离10。

5 回答 1904 浏览

2019-07-23

为什么padding上下左右值一样,可实际显示的不一样呢文中的li与内容与ul边框的上下左右距离是不一样的

最新回答 / 慕后端2468943

你把ul的width设置为100px，就能实现你想要效果。

1 回答 1972 浏览

2019-02-03

关于盒模型

最新回答 / qq_慕标6171462

我觉得padding上下左右默认是一样的但不是100px（可以设置），你设置一个border看看，它跟内容之间的宽度就是padding（你可以设置一行或几行内容去观察，假如这行内容未满，我理解为剩下的是空格），还有width是内容宽度即黑色箭头，height也是黄箭头。我也新手，我的理解就这样，希望能帮到你。

1 回答 1130 浏览

2019-01-31

元素内容和边框的距离怎么更短

最新回答 / 慕丝8496262

设置成负值，可以更加接近。

1 回答 1849 浏览

2018-10-27

全部我要发布

最热最新

只看我的

12-12 宰相肚里能撑船 -...