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

盒子的高度比较大，所以设置填充padding为20px时，他只有上填充和左填充满足了吗？

请问这个有什么规律呢？他优先满足了上填充和左填充为20px吗？为何不是满足右填充和下填充距离为20px呢？

Michael_O_O_

2015-01-08

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

关注问题我要回答

3417

操作

收起

5 回答

Chacetse
2015-01-09

如果还不明白把这段代码贴到编辑器内，看看效果你就明白了。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>填充</title>
<style type="text/css">
#box1{
    width:60px; /*注意此时盒子的宽度应该是102px，加上左右填充20px，左右各1px边框*/
    height:60px; /*注意此时盒子的高度应该是102px，加上上下填充20px上下各1px边框*/
    padding:20px;/*给盒子上右下左的填充各添加20px */
    border:1px solid red;/*给盒子上右下左都加上1px的红色实心边框 */
}
#box2{
    width:60px;
    height:60px;
    background:#CCC;
}
</style>
</head>
<body>
<div id="box1">
    <div id="box2">盒子1</div>
</div>
</body>
</html>

3 回复有任何疑惑可以回复我~

收起回答

穆男神

明白了只是里面的内容没有写出来

2015-01-23 回复有任何疑惑可以回复我~

Chacetse
2015-01-09

盒子填充还有外边距都是遵循上右下左的顺序规则，比如你只定义padding:20px; 那盒子的上填充右填充下填充左填充各为20px， "padding:20px;"是"padding-top:20px; padding-right:20px; padding-bottom:20px; padding-left:20px;"的缩写。

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

收起回答

Michael_O_O_ 提问者

这个我知道的，笔记有，没懂我的意思

2015-01-09 回复有任何疑惑可以回复我~

Chacetse 回复 Michael_O_O_ 提问者

你给盒子设定padding:20px;就已经是上右下左的填充值各位20px;了，只是本次教程中只能看到左边和上边的padding值，因为你的文本内容太少，占不满，所以看不见右边的和底部的填充值，你可以给文本内容加一个背景就可以看见上下左右的padding值各是20px。

2015-01-09 回复有任何疑惑可以回复我~

慕码人4583819 回复 Chacetse

回答到问题所在了牛逼

2015-04-08 回复有任何疑惑可以回复我~