明明设置的是上下左右10px的内边距，为什么距离不一样？
代码：
#box1{
width:100px;
height:100px;
padding:10px;
border:1px solid red;
}
正常“盒子1”不是应该在正中间，上下左右的距离相等吗？
个回答
-
- 慕娘1049553
- 2020-07-14 22:54:42
我觉得应该是这样 -
- qq_我很Man_03586236
- 2020-02-03 17:35:12
你跟本理解错了，height,width是这个方框里面的高度和宽度，而不是指里面的字，你想控制字，要用text-align
-
- 慕码人8024790
- 2019-12-30 18:52:00
内容没有按照设定的值装满，当然就会与边框之间有一定距离，这就好比你往杯子里倒水，你只给它半杯水，上半部分当然就会是空的咯。不过，有两种解决办法：1）把width和height的值改小（可以理解为把杯子换为容量更小的）。2）多写文字试试（可以理解为多倒水）。
-
- 从人进化成猿
- 2019-12-26 00:50:57
请看图，这应该是你预期的效果。你的代码是正确的，显示出来的结果也是正确的。你觉得不居中是因为你的内容不够。
从代码上来看，设置了一个宽和高均为100px的盒子，内容与边框上下左右的距离均为10px。但是你的内容不够，所以效果不对，你多加点内容就能看到想要的效果。
-
- 慕木暮目
- 2019-12-25 11:09:23
首先，再仔细地多看几遍11-8，搞清楚width，height究竟指的是什么；
其次，汉字“盒子1”只是一个名称（符号），里面其实还并未放“内容”。
-
- Maoli_
- 2019-11-25 18:51:09
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>填充</title><style type="text/css">#box1{ width:100px; height: auto; /*垂直居中*/ padding:39px 0; /*水平剧中*/ text-align: center; border:1px solid red;}</style></head><body><div id="box1">盒子1</div></body></html> -
- 蝴蝶蓝兰
- 2019-10-05 00:58:00
#box1{
width:100px;
height:100px;
padding:10px;
border:1px solid red;
}
盒子里面的内容是,宽高设置的是100px，你的填充设置设置的是10px，盒子里面内容的边框可能把盒子撑大了。
你可以试试这个代码，看到边框不对称自己可以多改下。
#one{
height:50px;
width:50px;
padding:50px 100px 40px 100px;
<div id=one><span id="two">盒子</span></div>
最后效果图。 -
- 白中白
- 2019-10-02 11:45:25
我猜是因为先满足左上方，左上角符合了10px，但是因为盒子本身宽高为100px，所以造成这个样子。
-
- 慕桂英3107910
- 2019-09-16 15:42:27
同问 虽然我审查元素里面看到的结果是对的 但是还是不太明白为什么效果是这样的
-
- 慕无忌0907
- 2019-08-29 15:36:34
你的内容设置了width:100px; height:100px;你改一下值看下结果