为什么两个块级元素分别加上margin-top和margin-bottom只取最大值?

两个div,一个margin-top:200px;一个margin-bottom:100px;如下:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        div{
            width: 200px;height: 200px;
            background: #198;
        }
    style>
head>
<body>
<div style="margin-bottom: 100px">div>
<div style="margin-top: 200px;">div>
body>
html>

为什么两个块级元素分别加上margin-top和margin-bottom只取最大值?_第1张图片

很明显,两个div之间的距离只有200px;这是w3c规定的,但是这有什么意义呢?
当然有意义,比如几个段落,p标签是有默认margin 的,谷歌是16px,将两个边距合并,每个段落的边距就都是一样了。
当然,只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

你可能感兴趣的:(css)