看到一个面试题 关于行内元素span的
* {
padding: 0;
margin: 0;
}
span {
padding: 100px;
border: 1px solid red;
}
1
2
我当时就笑了还有这种题? 送分的?
我想的结果:

实际结果:

我擦! 啪啪啪打脸!
为什么padding-top被无视了?
提出这个疑问后我又被打脸了!
* {
padding: 0;
margin: 0;
}
span {
padding: 100px;
border: 1px solid red;
}
div{
border: 1px solid red;
}
1
2

其实span是不支持padding-top、padding-bottom,不过奇怪的是既然padding不支持那为什么边框显示是有padding-bottom呢?
查了好多文章 结果只得到了一句话 行内不可替换元素padding会对边框产生影响!
我擦 不可替换元素 老子干了不到十年前端没听过啊?
是的官方英文文档和高程上都有说过
span、a属于不可替换元素
input属于可替换元素
padding、margin针对不可替换元素 padding-top、padding-bottom和margin-top、margin-bottom无效。。。无效。。。
哈哈 总结一下多读书是有用的!
您的点赞是我继续下去的动力,谢谢!
博客围绕面试题中关于行内元素span的padding和margin展开。作者原以为是送分题,结果实际情况与预想不同,如span不支持padding-top、padding-bottom,但边框显示有padding-bottom。经查询得知,行内不可替换元素padding会影响边框,且针对不可替换元素,padding和margin的上下属性无效。
2918

被折叠的 条评论
为什么被折叠?



