HTML5第二天笔记02——外边距塌陷

最新推荐文章于 2023-07-25 17:24:47 发布

·青红造了个白·

最新推荐文章于 2023-07-25 17:24:47 发布

阅读量95

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/weixin_43861647/article/details/119081052

版权

<!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>
        .left {
            margin-right: 10px;
        }

        .right {
            margin-left: 10px;
        }

        .top,.bottom {
            width: 100px;
            height: 100px;
            background: lime;
        }

        .top {
            margin-bottom: 10px;
        }

        .bottom {
            margin-top: 20px;
        }

        .dad{
            margin-top:10px;
            width:400px;
            height:400px;
            background:lime;
            
            /* 解决外边距塌陷的第一种方法 */
            /* padding-top:10px; */

            /* 解决外边距塌陷的第二种方法 */
            overflow:hidden;
        }
        .son{
            width:200px;
            height:200px;
            background: pink;
            margin:10px auto;/* 此时父级div也会跟着下来，出现外边距塌陷 */
            /* 让块级标签水平居中 */
        }
    </style>
</head>

<body>
    <!-- 类名需要使用英文开始，不能和标签名一样 -->
    <span class="left">左边</span>
    <span class="right">右边</span>
    <div class="top"></div>
    <div class="bottom"></div>
    <div class="dad">
        <div class="son"></div>
    </div>
    
</body>

</html>

标准流中：

            1、左右外边距可以叠加,上下外边距的值取决于最大的

            2、外边距塌陷：父标签内部有一个子标签。如果给子标签增加margin-top父级会跟着下来。

            解决方法：

            1、不要使用margin-top,而是给父级增加padding-top

            2、给父级增加overflow:hidden

            浮动以后的值上下左右都可以叠加

·青红造了个白·

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5第二天笔记02——外边距塌陷

<!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>D.
复制链接

扫一扫