css 间距

/* 示例代码：使用 CSS 设置元素之间的间距 */

/* 1. 使用 margin 设置外边距 */
div {
    margin: 10px; /* 上下左右都设置为 10px 的外边距 */
}

/* 2. 使用 padding 设置内边距 */
div {
    padding: 20px; /* 上下左右都设置为 20px 的内边距 */
}

/* 3. 使用 margin 和 padding 分别设置上下左右的间距 */
div {
    margin-top: 15px;
    margin-right: 10px;
    margin-bottom: 15px;
    margin-left: 10px;

    padding-top: 20px;
    padding-right: 15px;
    padding-bottom: 20px;
    padding-left: 15px;
}

/* 4. 使用 margin 和 padding 的简写形式 */
div {
    margin: 10px 20px 10px 20px; /* 上 右 下 左 */
    padding: 20px 15px 20px 15px; /* 上 右 下 左 */
}

/* 5. 使用 box-sizing 属性确保元素的总宽度和高度包括内边距和边框 */
div {
    box-sizing: border-box;
    width: 300px;
    height: 200px;
    padding: 20px;
    border: 1px solid black;
}

解释说明：

• Margin：用于设置元素与其他元素之间的间距（外边距），可以控制元素周围的空白区域。
• Padding：用于设置元素内容与边框之间的间距（内边距），可以控制元素内部的空白区域。
• Box-sizing：用于控制元素的宽度和高度是否包含内边距和边框。border-box 模式下，元素的 width 和 height 包括了 padding 和 border，使得布局更易于控制。

通过这些属性，你可以灵活地调整网页中元素之间的间距，确保页面布局美观且符合设计要求。