CSS盒子模型（盒子模型下）

原创

已于 2024-05-04 16:09:13 修改 · 1.1k 阅读

26 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #学习 #开发语言 #css3

于 2024-05-04 16:07:29 首次发布

本文详细讲解了CSS中的边框、内边距和外边距概念，包括border-collapse属性、边框对盒子大小的影响、内边距与盒子尺寸的关系、外边距的应用、水平居中技巧、外边距合并现象以及如何清除内外边距。还通过实例演示了如何制作新浪微博选框栏和处理垂直外边距的塌陷问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

（大家好，今天我们将继续来学习CSS的相关知识，大家可以在评论区进行互动答疑哦~加油！💕）

1.4 表格的细线边框

border-collapse 属性控制浏览器绘制表格边框的方式，它控制相邻单元格的边框。

语法: border-collapse:collapse;

collapse单词是合并的意思。
border-collapse:collapse,表示相邻边框合并在一起。

1.5 边框会影响盒子实际大小

边框会额外增加盒子的实际大小，因此有两种解决方案:

测量盒子大小的时候不量边框。
如果测量的时候包含了边框，则需要width/height减去边框宽度。

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>边框会影响盒子的实际大小</title>
    <style>
        /* 我们需要一个200*200的盒子, 但是这个盒子有10像素的红色边框 */
        div {
            width: 180px;
            height: 180px;
            background-color: pink;
            border: 10px solid red;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

1.6 内边距(padding)

padding 属性用于设置内边距，即边框与内容之间的距离。

属性	作用
padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottom	下内边距

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" conten