零基础学习CSS(14)——内边距和外边距

Dragon水魅

发布于 2026-01-23 19:05:19

930

官方资料

鱼C课程案例库：https://ilovefishc.com/html5/ html5速查手册：https://man.ilovefishc.com/html5/ css速查手册：https://man.ilovefishc.com/css3/

学习正文

设置内边距：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>内边距</title>
    <style type="text/css">
        /* 为p元素定义内边距 */
        p {
            border: 2px solid red;
            background: lightblue;
            background-clip: content-box;
            /* padding简写：上右下左 */
            /*  三个值的padding简写：上 左右 下 */
            padding-top: 50px;
            padding-right: 20em;
            padding-bottom: 20%;
            padding-left: 20%;
        }
    </style>
</head>
<body>
    <p class="solid">展示内边距</p>
</body>
</html>

使用 margin 定义外边距：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>内边距</title>
    <style type="text/css">
        /* 为img元素定义外边距 */
        img {
            border: 2px solid red;
            background: lightblue;
            margin: 120px;
        }
    </style>
</head>
<body>
    <img src="Pig.png" alt="cjk">
    <img src="Pig.png" alt="cjk">
    <img src="Pig.png" alt="cjk">
</body>
</html>

将 margin 设置为 auto 可使文字水平居中：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>内边距</title>
    <style type="text/css">
        /* 为img元素定义外边距 */
        p {
            border: 2px solid red;
            background: lightblue;
            margin: auto;
            width: 10em;
        }
    </style>
</head>
<body>
    <p>使用auto使文字居中</p>
</body>
</html>