ThinkChat2.0新版上线,更智能更精彩,支持会话、画图、阅读、搜索等,送10W Token,即刻开启你的AI之旅 广告
## 盒子模型内外边距和边框介绍 当你的浏览器展现一个元素时,这个元素会占据一定的空间。这个空间由四部分组成。 ![](https://box.kancloud.cn/ff5f6c42e138e5cdaa94e71a883dc84d_637x349.png) ### 边框 用 `border` 属性给元素四周指定统一的边框。在属性值中指定边框的宽度(通常是以显示到屏幕上的像素为单位), 样式, 还有颜色。 样式包括: ![](https://box.kancloud.cn/e33db56a089c2bb87901e962766ba594_683x203.png) 你也可以通过设置样式为 `none` 或 `hidden` 来明确地移除边框。 如果一次只指定某一个方向的边框,就用属性:`border-top,border-right, border-bottom,border-left`。 下面的规则设置了一个标题元素的背景色和顶部边框: ```css h3 { border-top: 4px solid #7c7; /* 中绿 */ background-color: #efe; /* 浅绿 */ color: #050; /* 深绿 */ } ``` 结果如下: ![](https://box.kancloud.cn/1eda6ce52c2d36da8920b9dbbc6fef1e_351x50.png) ### 外边距和内边距 使用外边距和内边距调整元素的位置,并在其周围创建空间。用`margin`属性或者 `padding` 属性分别设置外边距和内边距的宽度。 * 如果你指定一个宽度,它将会作用于元素四周(上、右、下、左)。 * 如果你指定两个宽度, 第一个宽度会作用于顶部和底部,第二个宽度作用于右边和左边。 * 你也可以按照顺序指定四个宽度: 上、右、下、左。 下面的规则通过给元素四周设置红色边框,标记出了类名为 `remark` 的段落元素。 ```css p.remark { border: 2px solid red; padding: 4px; margin-left: 24px; } ``` 结果如下: ![](https://box.kancloud.cn/466794325bec210a9f575f94360c7bef_368x129.png) > 注意: > > * 外边距margin可以为负,内边距不可以为负。 > * 行内元素设置上下边距不影响行高。 > * 边框是可见的,边距是不可见的,只能看到对其他元素的影响。 ### 简写属性: 我们可以根据规定顺序,简写属性: * 设置两个属性值,那么第一个值表示上下边框的属性,第二个值表示左右边框的属性。 * 设置三个属性值,第一个值表示上边框属性,第二个值表示左右边框属性,第三个值表示下边框属性。 * 设置四个值,一次表示上右下左边框的属性。 例如: ```css h1{margin:10px 0px 15px 5px} ``` ### 行内元素的盒子模型 * 行内元素的盒子模型只能得到一行高度的空间,行高由`line-height`属性决定,没有设置该属性则为内容默认高度。 > 如果设置上下边框或者边距,会导致盒子高度超过行高,盒子上下部分将会与其他元素重叠。这就是行内元素不可设置上下边距的原因。 * 综上所述,不推荐对行内元素设置盒子属性,一般先用`display`属性设置内联元素为块级元素显示,再设置盒子属性。 ### 元素盒子属性的默认值 * 大多HTML元素的盒子属性默认值都为0。 * 少部分HTML元素盒子属性存在默认值,如:`body`,`p`,`ul`,`li`,`form`标签等,因此我们在需要的时候可以先初始化他们的属性为0。