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

填充内容位置问题

#box1{
    width:100px;
    height:100px;
    padding:10px;
    border:1px solid red;
}
</style>
</head>
<body>
<div id="box1">盒子1</div>

这段盒子不是应该在边框中间位置吗，因为上下左右填充是一样的。

961005

2016-10-25

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

关注问题我要回答

776

操作

收起

3 回答

南柯软件工程师回答被采纳 +3 积分
2016-10-25

padding是以内容为中心设置填充的宽高，width和height是块状元素的宽和高，它并不是以内容为中心的，内容再块状元素的左上角

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

收起回答

961005 提问者

那怎样能将内容就是“盒子”放置中央

2016-10-25 回复有任何疑惑可以回复我~

南柯软件工程师回复 961005 提问者

调宽高的数值肯定能行，但我估计还有更简单的方法，只是现在我也还不会

2016-10-25 回复有任何疑惑可以回复我~

961005 提问者回复南柯软件工程师

这个我试了，不行。。。

2016-10-25 回复有任何疑惑可以回复我~

查看2条回复

vihoppp
2016-11-07

padding 是填充盒子内内容区到盒子边框的距离，而文字只是在内容区内，光填充是不能使文字在盒子内居中的。

还有文字是不能设置width、height的，内容区是可以自行设置的。

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

收起回答

vihoppp
2016-11-07

text-align:center;

height:100px;

line-height:100px;

(这样肯定能使文字在盒子内上下左右居中，height 和 line-height 要设置成一样的）

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

收起回答

0/150

提交

取消

初识HTML(5)+CSS(3)-升级版

参与学习 1225293 人
解答问题 18230 个

HTML(5)+CSS(3)基础教程8小时带领大家步步深入学习标签用法和意义

进入课程

本课相似问答

2 回答填充以里的内容范围

3 回答填充问题padding

6 回答设置了内填充大小为什么内容文字会跑到边框外边

3 回答padding是边框与内容之间的部分吧？如何只设置padding的填充，不设置内容部分？

2 回答内容位置居中

搜索更多本课相关问答

填充内容位置问题

我要回答关注问题

热搜

最近搜索清空

填充内容位置问题

3 回答

本课相似问答

填充内容位置问题