实例

html>

选择器

p:nth-of-type(2) {

background-color: crimson;

}

运行实例 »

点击 "运行实例" 按钮查看在线实例

演示:padding 对盒子大小的影响与解决方案！

在下面html文档中，div包含了一张像素为200px的图片，如果设置图片的内边距各50像素，那么div盒子的右边距及下边距被撑开了多50px.

实例

html>

内边距

.box1 {

width: 300px;

height: 300px;

border: 1px solid black;

background-color: lightgreen;

}

.box1 {

padding: 50px;

}

运行实例 »

点击 "运行实例" 按钮查看在线实例

下面两个方法可以解决这个内边距撑开的问题！

下列html文档中，两个div标签中各包含了一张图素，属性像素为200px的元素.

第一个div

class="wrap"，和包含了div class=“box“d的图片我们可以用宽度分离法，把图片元素居中在第一个设置了宽高的div标签容器中；如下代码：

实例

html>

内边距

.wrap {

width: 300px;

;

}

.box2 {

padding: 50px;

background-color: lightblue;

border: 1px solid black;

}

运行实例 »

点击 "运行实例" 按钮查看在线实例

第二种方法可以使用调整 box-sizing，把图片的像素设置好后，设置box-sizing定位绝对值像素，这个像素是能让图片可以上下左右居中的数字，即可！如下代码

实例

html>

内边距

.box3 {

width: 300px;

box-sizing: border-box;

padding: 50px;

background-color: brown;

border: 1px solid black;

运行实例 »

点击 "运行实例" 按钮查看在线实例

三.margin中的同级塌陷, 嵌套传递与自动挤压, 并提出解决方案或应用场景html文档中会出现margi同级塌陷的情况如下代码所示

实例

html>

外边距

.box1 {

width: 100px;

height: 100px;

background-color: lightblue;

margin-bottom: 30px;

}

.box2 {

width: 100px;

height: 100px;

background-color: lightcoral;

margin-top: 100px;

}

运行实例 »

点击 "运行实例" 按钮查看在线实例

当两个盒子同级时；垂直方向，谁大按谁的像素显示！所以在设置排版要注意

html文档中会出现margi嵌套传递情况，如下代码！

实例

html>

外边距

.box3 {

width: 200px;

height: 200px;

background-color: lightblue;

}

.box4 {

width: 100px;

height: 100px;

background-color: lightcoral;

margin-top: 100px;

}

运行实例 »

点击 "运行实例" 按钮查看在线实例

这种方法可以解决，看如下代码和图片

实例

html>

外边距

.box3 {

width: 200px;

height: 200px;

background-color: lightblue;

}

.box4 {

width: 100px;

height: 100px;

background-color: lightcoral;

}

.box4 {

/* margin-top: 50px; */

}

.box3 {

padding-top: 50px;

height: 150px;

}

运行实例 »

点击 "运行实例" 按钮查看在线实例

html文档margin自动挤压情况，如下代码，

实例

html>

外边距

.box5 {

width: 150px;

height: 150px;

background-color: lightblue;

}

.box5 {

margin-left: auto;

}

运行实例 »

点击 "运行实例" 按钮查看在线实例