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

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

Endl

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

阅读量2k

点赞数 1

分类专栏： qianduanzhishidian

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

版权

qianduanzhishidian 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

本文深入讲解CSS中margin属性的定义、用法及注意事项，包括如何处理块级元素的垂直外边距合并问题，以及行内元素和浮动元素的外边距特性。提供了消除子盒子margin-top对父级盒子影响的三种实用方法。

摘要由CSDN通过智能技术生成

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>