V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Can I use?
http://caniuse.com/
Less
http://lesscss.org
Cool Libraries
Bootstrap from Twitter
Jetstrap
lisisi
V2EX  ›  CSS

为什么<p>标签的 margin 和其他块级标签的 margin,上下边距会重叠计算,但和<video>的 margin 却不会重叠计算?

  •  
  •   lisisi · 2019-08-06 11:57:54 +08:00 · 3681 次点击
    这是一个创建于 1970 天前的主题,其中的信息可能已经有所发展或是发生改变。

    例 1:

    <p style="margin: 10px 0">this is paragraph</p>
    <h1 style="margin: 10px 0">This is heading 1</h1>
    

    例 2:

    <p style="margin: 10px 0">this is paragraph</p>
    <video style="margin: 10px 0" src="#">This is video</video>
    

    例 1 中,p 和 h1 之间的总 margin 实际是 10px ( p 的 margin-bottom 和 h1 的 margin-top 重叠计算了);
    例 2 中,p 和 video 之间的总 margin 实际是 20px ( p 的 margin-bottom 和 video 的 margin-top 没有重叠计算)。

    2 条回复    2019-08-06 18:01:08 +08:00
    suinia
        1
    suinia  
       2019-08-06 12:02:40 +08:00   ❤️ 1
    margin 重叠 只发生在 block 元素上, 只发生在垂直方向上
    meepo3927
        2
    meepo3927  
       2019-08-06 18:01:08 +08:00
    <video /> 默认不是块级元素
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   4032 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 05:17 · PVG 13:17 · LAX 21:17 · JFK 00:17
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.