前端知识点之magin的用法与注意事项

最新推荐文章于 2021-05-14 10:38:21 发布

Endl

最新推荐文章于 2021-05-14 10:38:21 发布

阅读量1.8k

点赞数 1

分类专栏： qianduanzhishidian

本文链接：https://blog.csdn.net/Endl_1998/article/details/82940930

版权

qianduanzhishidian 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

margin:

margin的定义和用法：

margin是一个设置所有外边距的属性；

注意：块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。

行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。

允许指定负的外边距值，不过使用时要小心。

使用margin时的注意事项：

消除子盒子的margin-top对父级盒子的影响的方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>blockAndInline</title>
</head>
<style>
    body{
        margin:0px;
    }
    .box-test-1{
        background:red;
        width:100px;
        height:100px;
    }
    .box-test-2{
        background:blue;
        width:50px;
        height:50px;
        margin-top:20px;
    }
</style>
<body>
    <div class="box-test-1">
        <div class="box-test-2"></div>
    </div>
</body>
</html>

浏览器显示的结果

1：可以利用父级盒子的padding-top来代替子盒子的margin-top的值；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>blockAndInline</title>
</head>
<style>
    body{
        margin:0px;
    }
    .box-test-1{
        background:red;
        width:100px;
        height:100px;
        padding-top:20px;
    }
    .box-test-2{
        background:blue;
        width:50px;
        height:50px;
        margin-top:20px;
    }
</style>
<body>
    <div class="box-test-1">
        <div class="box-test-2"></div>
    </div>
</body>
</html>

2：给父级元素加上：overflow:hidden;
3：在父盒子的外部加上边框也可以消除margin-top对父盒子的影响；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>blockAndInline</title>
</head>
<style>
    body{
        margin:0px;
    }
    .box-test-1{
        background:red;
        width:100px;
        height:100px;
        border:1px solid #000;
    }
    .box-test-2{
        background:blue;
        width:50px;
        height:50px;
        margin-top:20px;
    }
</style>
<body>
    <div class="box-test-1">
        <div class="box-test-2"></div>
    </div>
</body>
</html>

Endl

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
前端知识点之magin的用法与注意事项

margin:margin的定义和用法：margin是一个设置所有外边距的属性；注意：块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。使用margin时的注意事项：消除子盒子的margin-top对父级盒子的影响的方法：&lt;!DOCT...
复制链接

扫一扫