padding不是元素内容与边框距离么?为什么设置padding:10px; 盒子的大小也会变动?我理解的是:盒子大小不动,里面的字移动
首先要弄清楚heigth和width指的是什么。实际上heigth和width定义的是盒子内部的内容区的宽和高。而你看到的由线框圈起来的“盒子”,是包括内容区+padding的。所以你定义了“padding:10px”后,盒子的大小自然改变了。
padding是元素内容与边框距离,你视觉上看到的由线框圈起来的“盒子”是包括padding和内容区的,所以单纯增加padding值,盒子大小小自然会变了。
我也想不通为什么会变动呢
默认内边距是0 当你设置了边距是 里面内容不变 盒子的大小就会变 了
你的理解错误,因为设置了padding:10px;要有效果,盒子就会变动,若不变动,其他设置就会变动,则设置不成立。也就没有设置意义,因为其他定量也成了变量。
你要的应该是这个
margin:10px;
padding对内,margin是对外。如果不明白的看回之前的视频