HTML哪些元素支持margin,html+css面试题 行内元素padding和margin

博客围绕面试题中关于行内元素span的padding和margin展开。作者原以为是送分题,结果实际情况与预想不同,如span不支持padding-top、padding-bottom,但边框显示有padding-bottom。经查询得知,行内不可替换元素padding会影响边框,且针对不可替换元素,padding和margin的上下属性无效。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

* {

padding: 0;

margin: 0;

}

span {

padding: 100px;

border: 1px solid red;

}

1

2

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

我想的结果:

1460000017762551

实际结果:

1460000017762552

我擦! 啪啪啪打脸!

为什么padding-top被无视了?

提出这个疑问后我又被打脸了!

* {

padding: 0;

margin: 0;

}

span {

padding: 100px;

border: 1px solid red;

}

div{

border: 1px solid red;

}

1

2

3

1460000017762553

其实span是不支持padding-top、padding-bottom,不过奇怪的是既然padding不支持那为什么边框显示是有padding-bottom呢?

查了好多文章 结果只得到了一句话 行内不可替换元素padding会对边框产生影响!

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

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

span、a属于不可替换元素

input属于可替换元素

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

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

您的点赞是我继续下去的动力,谢谢!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值