css前端盒模型 |css nav样式行高

根据CSS的盒模型，每个HTML元素都可以看做是由内容区域、内边距区域、边框区域和外边距区域组成的一个矩形盒子。

.box {
width: 150px;
height: 80px;
padding: 10px;
border: 1px solid #ccc;
margin: 20px;
}

上面这段CSS代码定义了一个宽为150px，高为80px的盒子，设置10px的内边距，1像素的边框和20像素的外边距。这个盒子包含以下四个部分：

1. 内容区域：宽为130px（150px减去左右2边的10像素内边距和1像素边框）, 高为60px（80px减去上下2边的10像素内边距和1像素边框）。
2. 内边距区域：宽为150px，高为80px，它是内容区域的外部，如果你为一个盒子设置10像素的内边距，则内容区域往内缩进10像素。
3. 边框区域：宽为152px（150px加上2边1像素的边框），高为82px（80px加上2边1像素的边框）。
4. 外边距区域：宽为190px（150px+左右2边的20像素外边距），高为120px（80px+上下2边的20像素外边距）。

在使用盒模型时，大家需要注意的是，盒子的实际宽度和高度 = 内容区域的宽度和高度 + 内边距的宽度和高度 + 边框的宽度和高度 + 外边距的宽度和高度。