盒子模型的外边距

诺坎普的风间

于 2023-03-17 08:44:38 发布

阅读量695

点赞数

分类专栏：前端只因变凤凰之路文章标签： css 前端外边距盒子模型的外边距 html Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_62588253/article/details/129610606

版权

前端只因变凤凰之路专栏收录该内容

50 篇文章 2 订阅

订阅专栏

🌟 所属专栏：前端只因变凤凰之路
🐔 作者简介：rchjr——五带信管菜只因一枚
😮 前言：该系列将持续更新前端的相关学习笔记，欢迎和我一样的小白订阅，一起学习共同进步~
👉 文章简介：本文介绍CSS的盒子模型中的外边距。知识学习内容来自b站的 @黑马程序员的视频

💥1外边距

margin属性用于设置外边距，用于控制盒子之间的距离

包括margin-left、margin-right、margin-top、margin-bottom

复合写法：与padding内边距一致

💥2外边距应用-块级盒子水平居中对齐

外边距可以让块级盒子水平居中，但必须做到：

盒子指定了宽度

盒子的左右外边距设置为auto

常见写法：margin: 0 auto;

注意：以上方法是块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加text-align：center即可。

<!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>Document</title>
    <style>
        .head {
            width: 960px;
            height: 200px;
            margin: 0 auto;
            background-color: pink;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="head">
        <span>里面的文字</span>
    </div>
</body>

</html>

💥3外边距合并

使用margin定义块级元素的垂直外边距时（margin-top和margin-bottom），可能会出现外边距的合并。

两种情况：

相邻块元素垂直外边距的合并

问题描述：当上下两个块级元素相遇，如果上面的块有margin-bottom，下面的块有margin-top，那么两个块之间的垂直距离就是两者的最大值，而不是和。

<!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>Document</title>
    <style>
        .head {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin-bottom: 100px;
        }

        .tail {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin-top: 200px;
        }
    </style>
</head>

<body>
    <div class="head">good</div>
    <div class="tail">bad</div>
</body>

</html>

解决方案：尽量只给一个盒子添加margin值

嵌套块元素垂直外边距的塌陷

问题描述：对于两个嵌套的父子盒子，父元素与子元素同时有上外边距，这时子元素的上外边距失效（左右外边距如果设置了是有用的），父元素的外边距变成两者中的最大值。

<!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>Document</title>
    <style>
        .father {
            width: 400px;
            height: 400px;
            background-color: purple;
            margin-top: 20px;
        }

        .son {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin-top: 30px;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son">

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

</html>

解决方法：

为父元素定义上边框

为父元素定义上内边距

为父元素添加overflow:hidden（常用）

💥4 清除内外边距

网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致，因此在开始布局前，要把所有元素的内外边距去除掉。

方法：用通配符去除掉

<!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>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
    </style>
</head>

<body>
    <div>
        没清除内外边距
    </div>
</body>

</html>

诺坎普的风间

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
盒子模型的外边距

🌟所属专栏：前端只因变凤凰之路🐔作者简介：rchjr——五带信管菜只因一枚😮前言：该系列将持续更新前端的相关学习笔记，欢迎和我一样的小白订阅，一起学习共同进步~👉文章简介：本文介绍CSS的盒子模型中的外边距。知识学习内容来自b站的@黑马程序员的视频💥。
复制链接

扫一扫