                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /初识HTML(5)+CSS(3)-升级版

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

代码：

#box1{

width:100px;

height:100px;

padding:10px;

border:1px solid red;

}

正常“盒子1”不是应该在正中间，上下左右的距离相等吗？

qq_慕侠6195768

2019-08-29

源自：初识HTML(5)+CSS(3)-升级版 12-12

关注问题我要回答

2739

操作

收起

10 回答

慕娘1049553
2020-07-14

我觉得应该是这样

1 回复有任何疑惑可以回复我~

收起回答

qq_我很Man_03586236
2020-02-03

你跟本理解错了，height,width是这个方框里面的高度和宽度，而不是指里面的字，你想控制字，要用text-align

1 回复有任何疑惑可以回复我~

收起回答

慕码人8024790
2019-12-30

内容没有按照设定的值装满，当然就会与边框之间有一定距离，这就好比你往杯子里倒水，你只给它半杯水，上半部分当然就会是空的咯。不过，有两种解决办法：1）把width和height的值改小（可以理解为把杯子换为容量更小的）。2）多写文字试试（可以理解为多倒水）。

4 回复有任何疑惑可以回复我~

收起回答

从人进化成猿
2019-12-26

请看图，这应该是你预期的效果。你的代码是正确的，显示出来的结果也是正确的。你觉得不居中是因为你的内容不够。

从代码上来看，设置了一个宽和高均为100px的盒子，内容与边框上下左右的距离均为10px。但是你的内容不够，所以效果不对，你多加点内容就能看到想要的效果。

6 回复有任何疑惑可以回复我~

收起回答

慕木暮目
2019-12-25

首先，再仔细地多看几遍11-8，搞清楚width，height究竟指的是什么；

其次，汉字“盒子1”只是一个名称（符号），里面其实还并未放“内容”。

0 回复有任何疑惑可以回复我~

收起回答

Maoli_
2019-11-25

<!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>

1 回复有任何疑惑可以回复我~

收起回答

qq_慕容254374

padding:39px 0；这个0是干嘛的

2019-12-06 回复有任何疑惑可以回复我~