html – 为什么display = inline-block增加不可控制的垂直边距
发布时间:2020-12-14 22:26:08 所属栏目:资源 来源:网络整理
导读:我正在努力解决我的问题在 http://jsfiddle.net,并有最奇怪的行为。你能解释这些( http://jsfiddle.net/C6V3S/)垂直边距是从哪里来的?出现在jsfiddle.net(至少在Chrome和FF中),当复制/粘贴到本地独立文件时,不会出现… 工程可以改为简单的块 独立测试文
我正在努力解决我的问题在
http://jsfiddle.net,并有最奇怪的行为。你能解释这些(
http://jsfiddle.net/C6V3S/)垂直边距是从哪里来的?出现在jsfiddle.net(至少在Chrome和FF中),当复制/粘贴到本地独立文件时,不会出现…
工程可以改为简单的块 独立测试文件示例: .txt { display: inline-block; width: 12px; height: 12px; border: none; padding: 0; margin: 0; background: #77FF77; } </style> <div class="btn"><div class="txt"></div></div> 解决方法
当您使.txt元素内联块时,它将进入父.btn元素的文本流。在这一点上,.btn的线高度踢入,大于.txt元素的高度。
所以,添加.btn {line-height:10px;}(例如),你的问题是固定的。我看到你已经试图影响内部的.txt元素的线高,所以你的尝试相当接近。调整字体大小也会起作用,因为默认行高是基于font-size的公式。无论如何,关键是要在父元素上执行,而不是子元素。 当您使内部元素成为块时,您没有这个问题,因为那里没有类似文本的内容,所以没有应用任何行高。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |