CODEWITHSUNDEEP
csstypography
danbrown
danbrown

Reputation: 165

How to control spacing between text simply

I want to space my text more accurately on the web. Its complicated with line-height, margins and padding all coming into play.

I really just want to be able to say, for example, there should be 20px (or rems / ems) between the heading and the text, and 20px (rems / ems...) between each paragraph. But I'm finding it difficult and complicated.

There seems to be a bizarre way that line-height works, where it doesn't quite line up with the centre of the text, dependant on its size. So basically there is no official 'top' and 'bottom' of the text from which to make your measurement to the next text block, or if there is, they don't necessarily line up with the real top and bottom of the text.

Is it possible to achieve precise control between text blocks, could anyone point me in the right direction, or do we have to accept that we can't perfectly control the space between them?

Thanks

Upvotes: 0

Views: 70

Answers (1)

Aaron
Aaron

Reputation: 10430

you could use % as the line height and add this to the body tag in your CSS, this will remain relevant to the size of the text.

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>

Upvotes: 1

Related Questions