Question

我知道填充是边框和最内层之间的空间。在下面的CSS中，如果我将底部填充放到40px，则内容不会在div中居中。为什么呢？

div {
    height:40px;
    width:40px;
    color:blue;
    background-color:red;
    border:10px solid blue;
    padding: 40px 40px 40px 40px;
}

<div>hello</div>

Answer 1

内容区域仍为40px高（因为这是您指定的高度），文字从顶部开始。

Answer 2

它不会因为你为你的元素设置height而只是删除它：

＆＃13;

div {
    width:40px;
    color:blue;
    background-color:red;
    border:10px solid blue;
    padding: 40px 40px 40px 40px;
}

＆＃13;

<div>hello</div>

＆＃13;

Answer 3

如果您添加line-height和text-align:center，它将center垂直和水平

div {
    height:40px;
    width:40px;
    color:blue;
    background-color:red;
    border:10px solid blue;
    padding: 40px 40px 40px 40px;
    line-height: 40px;
    text-align:center;
}

 <div>hello</div>

为什么这个填充不是中心内容？

3 个答案: