1、7外边距margin

最新推荐文章于 2024-04-15 19:17:28 发布

这一片月

最新推荐文章于 2024-04-15 19:17:28 发布

阅读量1.1k

点赞数

分类专栏： css样式文章标签： html 前端 css

本文链接：https://blog.csdn.net/qq_62865634/article/details/127352811

版权

css样式专栏收录该内容

41 篇文章 1 订阅

订阅专栏

提示：文章写完后，margin表示盒子与盒子之间的边距。

1、语法

div{

margin-left：“10px”；

margin-right：“10px”；

margin-top：“10px”；

margin-bottom：“10px”；

}

解释：

margin-left：“10px”；表示外边距，左边的外边距

margin-right：“10px”；表示外边距，右边的外边距

margin-top：“10px”；表示外边距，上边的外边距

margin-bottom：“10px”；表示外边距，下边的外边距

（1）、控制盒子与盒子之间的距离用到“margin”一、二、三、四个参数值，例如：

margin：20px；

表示为外边距上下左右边距为20像素，

margin：“10px 20px”；

表示外边上下为10像素、左右为20像素的外边距

margin：“10px 20px 30px”

表示外边距上为10像素、左右为20像素、下为30像素的外边距。

margin：“10px 20px 30px 40px”

表示外边距上为10像素、右边为20像素、下为30像素、左边为40像素。

自己代码展示：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外边距margin</title>
    <style>
        div {
            width: 200px;
            /* 宽 */
            height: 200px;
            /* 高 */
            background-color: pink;
            /* 背景填充颜色 */
        }
        
        .nav {
            margin-bottom: 20px;
            /* 这里表示外边框：指的就是盒子与盒子之间的距离、单位用像素px
            方向名词：
            margin；-left--左外边距
            margin-right--右外边距
            margin-top--上外边距
            margin-bottom--下外边距 */
        }
    </style>
</head>

<body>
    <div class="nav">1</div>
    <div>2</div>

</body>

</html>