盒子的高度比较大，所以设置填充padding为20px时，他只有上填充和左填充满足了吗？
来源：12-12 宰相肚里能撑船 - 使用padding为盒子设置内边距（填充）
Michael_O_O_
2015-01-08 20:05
请问这个有什么规律呢？他优先满足了上填充和左填充为20px吗？为何不是满足右填充和下填充距离为20px呢？
写回答
关注
3回答
-
- Chacetse
- 2015-01-09 11:01:39
如果还不明白把这段代码贴到编辑器内，看看效果你就明白了。
<!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> -
- Chacetse
- 2015-01-09 10:07:16
盒子填充还有外边距都是遵循上右下左的顺序规则，比如你只定义padding:20px; 那盒子的上填充 右填充 下填充 左填充各为20px， "padding:20px;"是"padding-top:20px; padding-right:20px; padding-bottom:20px; padding-left:20px;"的缩写。
-
- 康振宁
- 2015-01-09 09:23:42
padding:20px 0px 0px 20px;你把padding改成这个看看效果先
初识HTML(5)+CSS(3)-升级版
HTML(5)+CSS(3)基础教程8小时带领大家步步深入学习标签用法和意义
1225808 学习 · 18234 问题
相似问题