l-1

WEB教程

主页/CSS示例代码/CSS简单示例代码/CSS 外边距 示例代码

aaa

CSS示例代码

CSS 外边距 示例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS 外边距示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f4f4f4;
        }
        .box {
            width: 100%;
            max-width: 600px;
            margin: 20px auto; /* 上下外边距为20px，左右自动居中 */
            background-color: white;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        .margin-example {
            margin-bottom: 20px; /* 底部外边距 */
            padding: 15px;
            background-color: #e9ecef;
            border: 1px solid #ced4da;
            text-align: center;
        }
        .specific-margins {
            margin-top: 10px;
            margin-right: 15px;
            margin-bottom: 20px;
            margin-left: 25px; /* 分别指定上、右、下、左的外边距 */
            background-color: #d1ecf1;
        }
        .shorthand-margin {
            margin: 10px 15px 20px 25px; /* 顺时针方向：上 右 下 左 */
            background-color: #d4edda;
        }
    </style>
</head>
<body>

<div class="box">
    <div class="margin-example">底部有20px的外边距</div>
    <div class="margin-example specific-margins">特定方向上的外边距</div>
    <div class="margin-example shorthand-margin">简写形式的外边距</div>
</div>

</body>
</html>