定的padding为10px，为什么感觉文字下面感觉比其他几面短些，来个神解释下

源自：12-12 宰相肚里能撑船 - 使用padding为盒子设置内边距（填充）

定的padding为10px，为什么感觉文字下面感觉比其他几面短些，来个神解释下

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>填充</title>
<style type="text/css">

#box1{
background:green;
width:100px;
height:100px;
padding:100px;
border:1px solid red;

</style>
</head>

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

</html>

提问者：qq_曹振_0 2017-09-10 16:48

个回答

一只胡思乱想的猪: 2017-09-11 15:48:27

已采纳

其实是正常的,只是因为你的div设置的太小了,文字超出div的边界,图中最中间的蓝色小方块就是div区域,绿色区域是padding

或者你在div中加一个文本域就会显示正常了,代码如下:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>填充</title>
<style type="text/css">
#box1{
	background:green;
	width:100px;
	height:100px;
	padding:100px;
	border:1px solid red;
}
div textarea{
	width:100%;
	height:100%;
}

</style>
</head>

<body>
<div id="box1"><textarea width:100px;height:100px;>盒子1盒子盒子盒子盒子盒子盒子盒子盒子盒盒子盒子盒盒子盒子盒盒子盒子盒盒子盒子盒子盒盒子1盒子盒子盒子盒子盒子盒子盒子盒子盒盒子盒子盒盒子盒子盒盒子盒子盒盒子盒子盒子盒</textarea></div>
</body>

</html>

慕盖茨4351742

2017-09-10 20:02:52

1只占一个字符每个汉字占2个字符被挤下去了你加一个text-align: center;就好了

0
qq_Neverever_5

2017-09-10 19:52:41

text-align: center;

0