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

定的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

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

关注问题我要回答

1606

操作

收起

3 回答

一只胡思乱想的猪回答被采纳 +2 积分
2017-09-11

其实是正常的,只是因为你的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>