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

盒子的高度比較大，所以設(shè)置填充padding為20px時(shí)，他只有上填充和左填充滿足了嗎？

請(qǐng)問這個(gè)有什么規(guī)律呢？他優(yōu)先滿足了上填充和左填充為20px嗎？為何不是滿足右填充和下填充距離為20px呢？

Michael_O_O_

2015-01-08

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

關(guān)注問題我要回答

3502

操作

收起

3 回答

Chacetse
2015-01-09

如果還不明白把這段代碼貼到編輯器內(nèi)，看看效果你就明白了。

<!DOCTYPE?HTML>
<html>
<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=gb2312">
<title>填充</title>
<style?type="text/css">
#box1{
????width:60px;?/*注意此時(shí)盒子的寬度應(yīng)該是102px，加上左右填充20px，左右各1px邊框*/
????height:60px;?/*注意此時(shí)盒子的高度應(yīng)該是102px，加上上下填充20px上下各1px邊框*/
????padding:20px;/*給盒子上右下左的填充各添加20px?*/
????border:1px?solid?red;/*給盒子上右下左都加上1px的紅色實(shí)心邊框?*/
}
#box2{
????width:60px;
????height:60px;
????background:#CCC;
}
</style>
</head>
<body>
<div?id="box1">
????<div?id="box2">盒子1</div>
</div>
</body>
</html>

3 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

#1

穆男神

明白了只是里面的內(nèi)容沒有寫出來

2015-01-23 回復(fù) 有任何疑惑可以回復(fù)我~

Chacetse
2015-01-09

盒子填充還有外邊距都是遵循上右下左的順序規(guī)則，比如你只定義padding:20px; 那盒子的上填充右填充下填充左填充各為20px， "padding:20px;"是"padding-top:20px; padding-right:20px; padding-bottom:20px; padding-left:20px;"的縮寫。

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

#1

Michael_O_O_ 提問者

這個(gè)我知道的，筆記有，沒懂我的意思

2015-01-09 回復(fù) 有任何疑惑可以回復(fù)我~

#2

Chacetse 回復(fù) Michael_O_O_ 提問者

你給盒子設(shè)定padding:20px;就已經(jīng)是上右下左的填充值各位20px;了，只是本次教程中只能看到左邊和上邊的padding值，因?yàn)槟愕奈谋緝?nèi)容太少，占不滿，所以看不見右邊的和底部的填充值，你可以給文本內(nèi)容加一個(gè)背景就可以看見上下左右的padding值各是20px。

2015-01-09 回復(fù) 有任何疑惑可以回復(fù)我~

#3

慕碼人4583819 回復(fù) Chacetse

回答到問題所在了牛逼

2015-04-08 回復(fù) 有任何疑惑可以回復(fù)我~