gpt4 book ai didi

html - 为什么 h2 中的 img 会在另一个显示 :table divs 中导致额外的顶部填充

转载 作者:行者123 更新时间:2023-11-28 13:35:54 28 4
gpt4 key购买 nike

这在 Chrome 和 FireFox 中呈现相同,所以这可能是预期的行为,但它看起来很奇怪。将图像放在带有“display:table-cell”的 div 顶部的 h2 标签中会导致其他 table-cell div 顶部的额外填充与图像的大小大致相同。

这是我的测试代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Chrome Test</title>

<style>
#col3 {
display:table;
border:1px solid black;
}
#col3 div {
width:33%;
display:table-cell;
border:1px solid blue;
}
</style>

</head>
<body>
<h2>Wrong?</h2>
<div id="col3">
<div>
<h2>Heading 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</div>
<div>
<h2><img src="url" height="80" width="215" alt="heading 2" /></h2>
<p>Suspendisse imperdiet lorem porta est venenatis viverra. </p>
</div>
<div>
<h2>Heading 2</h2>
<p>Aliquam laoreet diam sed ligula varius porta. Morbi volutpat ullamcorper diam, </p>
</div>
</div>
<h2>Right</h2>
<div id="col3">
<div>
<h2>Heading 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pretium, </p>
</div>
<div>
<h2>Heading 2</h2>
<p><img src="url" height="80" width="215" alt="heading 2" />Suspendisse imperdiet lorem porta est venenatis viverra. </p>
</div>
<div>
<h2>Heading 2</h2>
<p>Aliquam laoreet diam sed ligula varius porta. Morbi volutpat ullamcorper diam, </p>
</div>
</div>
</body>
</html>

这是一个错误吗?我可以避免这种行为吗?

最佳答案

h2 标签是一个 block 元素,可能有一些浏览器分配给它的默认填充。请务必包含一个 CSS 重置文件(例如 this one ),以删除不需要的格式。

关于html - 为什么 h2 中的 img 会在另一个显示 :table divs 中导致额外的顶部填充,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9808437/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com