                        課程
                    
                        /前端開發
                        
                            /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

關注問題我要回答

1657

操作

收起

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>