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

36次阅读

共计 656 个字符,预计需要花费 2 分钟才能阅读完成。

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

<style>
* {
padding: 0;
margin: 0;
}

span {
padding: 100px;
border: 1px solid red;
}
</style>
<body>
<span>1</span>
<span>2</span>
</body>
我当时就笑了还有这种题?送分的?
我想的结果:
实际结果:
我擦!啪啪啪打脸!
为什么 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>
其实 span 是不支持 padding-top、padding-bottom, 不过奇怪的是既然 padding 不支持那为什么边框显示是有 padding-bottom 呢?查了好多文章 结果只得到了一句话 行内不可替换元素 padding 会对边框产生影响!
我擦 不可替换元素 老子干了不到十年前端没听过啊?
是的官方英文文档和高程上都有说过
span、a 属于不可替换元素 input 属于可替换元素
padding、margin 针对不可替换元素 padding-top、padding-bottom 和 margin-top、margin-bottom 无效。。。无效。。。
哈哈 总结一下多读书是有用的!
您的点赞是我继续下去的动力,谢谢!

正文完
 0