关于css中margin的值和垂直外边距重叠问题

  发布时间:2020-10-27 16:52:39   作者:我的前端梦   我要评论
这篇文章主要介绍了关于css中margin的值和垂直外边距重叠问题,本文给大家介绍的非常详细对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

并列盒子的margin(双margin的重叠)面试题:一个盒子有上边距,另一个盒子有下边距,会出现margin边距的重叠问题?解决:取大值,并不是他们的相加之和,而是谁大听谁的!

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
    *{margin: 0;padding: 0;}
    .box1,.box2{
    width: 200px;
    height: 200px;    
    }
    .box1{
    background-color: #f90;
    margin-bottom: 20px;
    }
    .box2{
    background-color: aqua;
    margin-top: 50px;
    }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

margin跟padding内边距的方位值和取值情况一样,顺时针方向(上右下左),点击查看"css盒子模型之内边距padding及简写"

到此这篇关于关于css中margin的值和垂直外边距重叠问题的文章就介绍到这了,更多相关margin垂直外边距重叠内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!

相关文章

  • CSS中使用负margin值来调整居中位置

    这篇文章主要介绍了CSS中使用负margin值来调整居中位置的方法,文中同时提到了这种常用方法的一些值得注意的地方,需要的朋友可以参考下
    2015-07-15
  • CSS中的边界margin的取值为负值说明

    CSS中的边界margin的取值也可以为负值,有时候我们不敢相信,这是一个有趣的话题,负值边界会给我们带来更多新奇的创意,让我们的工作更具刺激和挑战。
    2011-03-13

最新评论