css - 如何简单地控制文本之间的间距

Question

我想在网络上更准确地分隔我的文本。它与行高、边距和填充一起发挥作用变得复杂。

我真的只是想说，例如，标题和文本之间应该有 20px(或 rems/ems)，每个段落之间应该有 20px(rems/ems ...)。但我发现这很困难而且很复杂。

line-height 的工作方式似乎很奇怪，它与文本的中心不太对齐，这取决于它的大小。所以基本上没有正式的文本“顶部”和“底部”来衡量下一个文本 block ，或者即使有，它们也不一定与文本的真实顶部和底部对齐。

是否有可能实现文本 block 之间的精确控制，任何人都可以指出正确的方向，还是我们必须接受我们无法完美控制它们之间的空间？

谢谢

Answer 1

您可以使用 % 作为行高并将其添加到 CSS 中的 body 标记中，这将与文本的大小保持相关。

body {
    font-size: 1em;
    line-height: 160%;
}

<h1>Anthology of Interest I</h1> <p>Yes! In your face, Gandhi! Good man. Nixon's pro-war and pro-family. Calculon is gonna kill us and it's all everybody else's fault!</p> <h2>The Sting</h2> <p>Hey, tell me something. You've got all this money. How come you always dress like you're doing your laundry? Kids don't turn rotten just from watching TV. You've killed me! Oh, you've killed me! Tell her she looks thin.</p> <ul> <li>Why did you bring us here?</li> <li>Oh dear! She's stuck in an infinite loop, and he's an idiot! Well, that's love for you.</li> <li>Goodbye, cruel world. Goodbye, cruel lamp. Goodbye, cruel velvet drapes, lined with what would appear to be some sort of cruel muslin and the cute little pom-pom curtain pull cords. Cruel though they may be&hellip;</li> </ul> <h3>The Route of All Evil</h3> <p>Oh dear! She's stuck in an infinite loop, and he's an idiot! Well, that's love for you. No argument here. That's the ONLY thing about being a slave. I usually try to keep my sadness pent up inside where it can fester quietly as a mental illness. No! The kind with looting and maybe starting a few fires! Guards! Bring me the forms I need to fill out to have her taken away!</p> <h4>The Sting</h4> <p>You guys aren't Santa! You're not even robots. How dare you lie in front of Jesus? And I'm his friend Jesus. You can crush me but you can't crush my spirit! Actually, that's still true.</p> <ol> <li>For example, if you killed your grandfather, you'd cease to exist!</li> <li>I love this planet! I've got wealth, fame, and access to the depths of sleaze that those things bring.</li> <li>I just want to talk. It has nothing to do with mating. Fry, that doesn't make sense.</li> <li>Dr. Zoidberg, that doesn't make sense. But, okay!</li> </ol> <h5>The Prisoner of Benda</h5> <p>Yeah, and if you were the pope they'd be all, "Straighten your pope hat." And "Put on your good vestments." I just want to talk. It has nothing to do with mating. Fry, that doesn't make sense. Tell her you just want to talk. It has nothing to do with mating. Fetal stemcells, aren't those controversial? I didn't ask for a completely reasonable excuse! I asked you to get busy! Oh, I always feared he might run off like this. Why, why, why didn't I break his legs?</p>