                        課程
                    
                        /前端開發
                        
                            /HTML/CSS
                        
                        /初識HTML(5)+CSS(3)-升級版

為什么內容會溢出盒子外面？

<!DOCTYPE HTML>

<html>

<head>

#box1{

? ? width:100px;

? ? height:100px;

? ? padding:10px;

? ? border:1px solid red;

}

</style>

</head>

<body>

</body>

</html>

我的padding已經設置為什么我繼續往盒子加內容的時候為什么會溢出到盒子外面去了呢？

荷犸

2016-03-12

源自：初識HTML(5)+CSS(3)-升級版 12-12

關注問題我要回答

1660

操作

收起

4 回答

wzw218661
2016-03-12

好像是中文就不會出去? 英文和數字會出去，你試試

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

收起回答

rantiny

超過盒子的高度也會出去的

2016-03-13 回復有任何疑惑可以回復我~

wzw218661
2016-03-12

你那所謂的盒子并不是真正的盒子，是自己定義的一個內容的邊框而已吧，你試試改變box1 border的寬度，“盒子”也會變大

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

收起回答

荷犸提問者

但是有padding啊，這是性質的作用不是盒子內容的內邊距嗎？有邊距為什么內容還是會跑到外面去的呢？這不是很奇怪嗎？

2016-03-15 回復有任何疑惑可以回復我~

julin1991
2016-03-12

<!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;
???? display:inline;
??? border:1px solid red;
}
div{padding:10px;}
</style>
</head>
<body>
<div id="box1">盒子1666666666666666666666666</div>
</body>
</html>