css中相邻元素的margin其实是会自动合并的，且取较大值。

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>test</title>

        <style>

            .div1 {

                width: 60px;

                height: 60px;

                background-color: #fdd;

                border: 10px solid #fee;

                padding: 20px;

                margin: 30px;

                /*设置上下margin为30px*/

            }

            .div2 {

                width: 60px;

                height: 60px;

                background-color: #fdd;

                border: 10px solid #fee;

                padding: 20px;

                margin: 60px 30px;

                /*设置上下margin为60px*/

            }

        </style>

    </head>

    <body>

        <div class="div1"></div>

        <div class="div2"></div>

    </body>

</html>

实际效果：div1和div2上下相距60px，而不是90px。

那float的坑是什么啦？

那就是float会取消相邻元素margin的自动合并！

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>test</title>

        <style>

            div {

                width: 60px;

                height: 60px;

                background-color: #fdd;

                border: 10px solid #fee;

                padding: 20px;

                margin: 30px;

                float: left;

                /*设置左浮动*/

            }

        </style>

    </head>

    <body>

        <div></div>

        <div></div>

    </body>

</html>

效果如下：两个div左右相距60px，而不是30px了！

相邻元素margin的自动合并与float的坑的更多相关文章

  1. 关于margin外边距合并的问题

    一 .兄弟元素margin外边距合并演示   当两个垂直方向相邻的兄弟元素都为常规流块盒,他们之间垂直方向的外边距不是两者之和,而是取两者中的最大值.这种现象被称为相邻的兄弟元素垂直方向外边距合并. ...

  2. 相邻元素之间的margin合并问题

    任何元素都可以设置border 设置宽高可能无效 行内元素设置padding,margin上下是无效的,左右是有效的 外边距合并:指的是,当两个垂直外边距相遇时,它们将形成一个外边距. 合并后的外边距 ...

  3. 日常踩坑 — 相邻元素之间的margin合并问题。

    踩坑:使用v-for渲染的组件,当然图中的id已经换成class,还是没有解决这个问题,于是各种查找资料,我就不信简单的CSS问题这么难解决! v-for渲染组件级传值: <div class= ...

  4. 为什么margin-top不是作用于父元素【margin外边距合并问题】

    coding时发现margin-top居然没作用于本元素上,而是作用到了父元素上. 原来是margin外边距合并导致的.以下是网上搬运来的知识: margin外边距合并详解:外边距合并现象在网页布局中 ...

  5. position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？

    这是寒冬大神提出的一个题目,刚开始看到这题的时候完全不知道从什么地方回答起好,题目内容比较广泛,找不到针对点.后来我觉得这个题目应该能拆成几个点来回答:1.'display'.'position' 和 ...

  6. margin外边距合并问题以及解决方式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 盒子模型、网页自动居中、float浮动与清除、横向两列布局

    1.CSS包含:标准文档流,浮动,绝对定位 标准文档流的特点:从上到下,从左到右,输出文档内容 盒子模型:块级元素(div ui li dl dt p)与行级元素(span strong img in ...

  8. 转载：margin外边距合并问题以及解决方式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. jQuery中的层级选择器（四、二）：后代元素、子元素、相邻元素、兄弟元素

    <!DOCTYPE html> <html> <head> <title>层次选择器</title> <meta http-equiv ...

随机推荐

  1. mssql手工盲注

    遇到中文的列名 利用unicode 进行单字节的转换 declare @s varchar(50);set @s = N'拉';select UniCode(@s),nchar(UniCode(@s) ...

  2. MySQL存储过程举例

    涉及循环.动态sql等主要的MySQL存储过程知识. 需求: 遍历所有[test_ondev_[0-9]]开头的表,将其中的所有数据按表中的col字段存储到[test_ondev_history_ + ...

  3. query 线段树 + 区间排序

    https://nanti.jisuanke.com/t/41391 这个题目没有很难想,比较暴力,但是要会算复杂度,不会算复杂度,就会觉得自己的算法会超时,实际上不会. 这个题目就是直接暴力求出每一 ...

  4. H - Buy Tickets POJ - 2828 逆序遍历 树状数组+二分

    H - Buy Tickets POJ - 2828 这个题目还是比较简单的,其实有思路,不过中途又断了,最后写了一发别的想法的T了. 然后脑子就有点糊涂,不应该啊,这个题目应该会写才对,这个和之前的 ...

  5. Vue + Element-ui实现后台管理系统(2)---项目搭建 + ⾸⻚布局实现

    项目搭建 + ⾸⻚布局实现 上篇对该项目做了个总述 :Vue + Element-ui实现后台管理系统(1) --- 总述 这篇主要讲解 项目搭建 + 后台⾸⻚布局实现 : 整体效果 后台首页按布局一 ...

  6. 关于网上quartus ii 生成fft核出现问题解决

    ------------恢复内容开始------------ 关于网上quartus ii 生成fft核出现问题解决 1:必须把软件破解啦 2:必须把IP核破解啦 破解步骤网上也有可以直接看,一定要全 ...

  7. 安卓集成Unity开发示例(一)

    本项目目的是在移动端的 Native App 中以库的形式集成已经写好的 Unity 工程,利用 Unity 游戏引擎便捷的开发手段进行跨平台开发. Unity官方文档 Unity as a Libr ...

  8. docker redis shell

    docker中安装好redis后,运行 docker ps 指令,查看所有运行中的镜像信息 然后运行 docker inspect --format "{{ .State.Pid}}&quo ...

  9. ":-"的用法举例

    例子1: #!/bin/bash A=aaa C=${A:-bbb} echo $C 输出结果:aaa 例子2: #!/bin/bash A="" C=${A:-bbb} echo ...

  10. Codeforces 949C(Data Center Maintenance,Tarjan缩点)

    难度系数:1900 graphs 题意:有 n 个银行,m 个客户,每个客户都把自己的资料放在 2 个银行,一天总共有 h 小时,每个银行每天都要维护一小时,这一小时内银行无法工作,但是这一小时客户仍 ...