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

时间:2015-02-19 12:00:39

标签: css typography

我希望在网络上更准确地展示我的文字。它复杂的线高,边距和填充都发挥作用。

我真的只想说,例如,标题和文本之间应该有20px(或rems / ems),每段之​​间应该有20px(rems / ems ...)。但我发现它很难和复杂。

线高似乎有一种奇怪的方式,它根本不与文本的中心对齐,取决于它的大小。所以基本上没有官方的#top;'和'底部'从中可以测量到下一个文本块的文本,或者如果有,它们不一定与文本的真实顶部和底部对齐。

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

谢谢

1 个答案:

答案 0 :(得分: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> 
&#13;
&#13;
&#13;