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

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

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>填充</title>

<style type="text/css">

#box1{

width:100px;

height:100px;

padding:10px;

border:1px solid red;

}

</style>

</head>

<body>

<div id="box1">盒子1</div>

</body>

</html>

慕后端5233451

2019-03-06

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

关注问题我要回答

1823

操作

收起

5 回答

weixin_慕的地531652
2019-05-18

不居中是因为字体的高宽是有固定大小的，而达不到的部分实际用空白取代了呢可通过设置参数来实现

text-align;
line-height;
通过浏览器的检查是可以查看空白部分的盒子模型的

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

小小铁头娃
2019-05-07

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

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

#1

qq_慕仔5019791

padding:10px不是上、右、下、左都是10吗？

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

#2

qq_慕粉5369935 回复 qq_慕仔5019791

上下左右都是10px的话盒子的大小就变了，但是盒子的大小已经是固定的100px了

2019-07-23 回复有任何疑惑可以回复我~

哟西红豆泥
2019-05-06

并不是说设置了padding四个方向相同就居中的你可以试试不设置padding看看它的初始状态再分别改变四个方向可以看到它是在初始状态下再改变距离的可以自己动手试一下

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

世界意志
2019-03-06

你要水平垂直都居中的话要加两行css代码

text-align:center;
line-height:100px; //要和height属性设置的值相同

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

幕布斯5209223
2019-03-06

因为要设置test-align:center才能居中位置

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

举报

0/150

提交

取消

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

参与学习 1222423 人
解答问题 18209 个

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

本课相似问答

5 回答内容怎么不在方框中间？

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

3 回答这里的盒子1为什么不在边框的中间呢？

1 回答给边框添加元素为什么不能显示

2 回答div不是块状元素吗，为什么在行内元素？

搜索更多本课相关问答

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

我要回答关注问题

意见反馈帮助中心 APP下载