html+css面试题 行内元素padding和margin

2019年9月13日 139次阅读 来源: 我是一个前端

看到一个面试题 关于行内元素span的


    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        span {
            padding: 100px;
            border: 1px solid red;
        }
    </style>
<body>
    <span>1</span>
    <span>2</span>
</body>

我当时就笑了还有这种题？ 送分的？

我想的结果：
《html+css面试题 行内元素padding和margin》

实际结果：
《html+css面试题 行内元素padding和margin》

我擦！ 啪啪啪打脸！

为什么padding-top被无视了？
提出这个疑问后我又被打脸了！

    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        span {
            padding: 100px;
            border: 1px solid red;
        }
      div{
          border: 1px solid red;
      }
    </style>
<body>
    <span>1</span>
    <span>2</span>
    <div>3</div>
</body>

《html+css面试题 行内元素padding和margin》
其实span是不支持padding-top、padding-bottom,不过奇怪的是既然padding不支持那为什么边框显示是有padding-bottom呢？
查了好多文章 结果只得到了一句话 行内不可替换元素padding会对边框产生影响！

我擦 不可替换元素 老子干了不到十年前端没听过啊？

是的官方英文文档和高程上都有说过

span、a属于不可替换元素
input属于可替换元素

padding、margin针对不可替换元素 padding-top、padding-bottom和margin-top、margin-bottom无效。。。无效。。。

哈哈 总结一下多读书是有用的！

您的点赞是我继续下去的动力，谢谢！

    原文作者：我是一个前端
    原文地址: https://segmentfault.com/a/1190000017762548
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞