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

盒子大小的变动？

padding不是元素内容与边框距离么？为什么设置padding:10px; 盒子的大小也会变动？我理解的是：盒子大小不动，里面的字移动

慕婉清9138734

2016-02-01

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

关注问题我要回答

1222

操作

收起

6 回答

不劳虎
2016-02-11

首先要弄清楚heigth和width指的是什么。实际上heigth和width定义的是盒子内部的内容区的宽和高。而你看到的由线框圈起来的“盒子”，是包括内容区+padding的。所以你定义了“padding：10px”后，盒子的大小自然改变了。

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

收起回答

慕婉清9138734 提问者

感谢！！

2016-02-11 回复有任何疑惑可以回复我~

不劳虎
2016-02-11

padding是元素内容与边框距离，你视觉上看到的由线框圈起来的“盒子”是包括padding和内容区的，所以单纯增加padding值，盒子大小小自然会变了。

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

收起回答

_小白_39
2016-02-09

我也想不通为什么会变动呢

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

收起回答

枫的轻吟
2016-02-01

默认内边距是0 当你设置了边距是里面内容不变盒子的大小就会变了

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

收起回答

zmc1903150733

能说具体点吗蒙了跟楼主问题一样

2016-02-14 回复有任何疑惑可以回复我~

qq_沉默是金十年不变_0
2016-02-01

你的理解错误，因为设置了padding:10px;要有效果，盒子就会变动，若不变动，其他设置就会变动，则设置不成立。也就没有设置意义，因为其他定量也成了变量。

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

收起回答

致_十年后的我
2016-02-01

你要的应该是这个

margin:10px;

padding对内，margin是对外。如果不明白的看回之前的视频

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

收起回答

zmc1903150733

能说具体点吗蒙了跟楼主问题一样

2016-02-14 回复有任何疑惑可以回复我~

ablank 回复 zmc1903150733

就比如说盒子的宽度是（margin-left）+（border-left）+（padding-left）+（width）+（padding-right）+（border-right）+（margin-right）的和，假设为10px+5px+40px+200px+40px+5px+10px=310px，当（padding-left）和（padding-right）都增加到50px，其他部分不变，此时盒子的宽度就变成了330px，高度同理。所以盒子大小就变了呀。不知道理解的对不对

2016-02-21 回复有任何疑惑可以回复我~

0/150

提交

取消

初识HTML(5)+CSS(3)-升级版

参与学习 1222654 人
解答问题 18210 个

HTML(5)+CSS(3)基础教程8小时带领大家步步深入学习标签用法和意义

进入课程

本课相似问答

4 回答盒子大小的设置

2 回答要怎样才会变内容大小而不是变盒子大小？

5 回答盒子大小问题。

2 回答为什么改变盒子模型的填充都会改变盒子模型的大小

1 回答为什么把边距改大盒子会改变大小

搜索更多本课相关问答

盒子大小的变动？

我要回答关注问题

热搜

最近搜索清空

盒子大小的变动？

6 回答

本课相似问答

盒子大小的变动？