in that case
<head>
<style>
.some_name
{
line-height:50px;
}
</style>
</head>
<p class="some_name">
your text here
</p>
Although that may make space for a single line it will not work very well for paragraphs of text that wrap to a new line as each line will be very far apart. What you in fact want is space between each paragraph and not space between each line of the paragraph. Although you do need to use line-height to get the correct spacing for each line it is not the answer to this question :). Line height is often better as a unitless value anyway.
That will make the line a tenth of the height that it actually needs and will result in text that effectively wraps and sits on top of itself. 100% would be the minimum for the font to display but most times you would be using something like 140% (= 1.4em) but as I said above unitless is best so 1.4 is the preferred option and would pass a scaling factor down to nested children rather than a computed fixed height as with the other approaches.
4 Likes
There really IS a correct way to do this.
Margins separate boxes from each other. Padding separates a box from its own content.
In some cases the visual effect of using margin or padding is the same, but it’s really not the same at all!
Consider a simple <a> link (set to inline-block). If you put a lot of margin or a lot of padding on it, it will look the same either way. BUT try setting a background color on the link to make it look more like a button. The difference is huge. Padding will make the colored part of the link expand (making a bigger button), but margin will not.
Also if you put padding on a link, it makes the “clickable” part of the link bigger, so there is more space the user can click on. But using margin does not increase the clickable area of the link. This is very important when building buttons and navigation and hover effects, etc. (Noting that inline elements don’t use margin, thx @PaulOB)
Line height is another beast entirely. It creates vertical distance on inline elements when those elements wrap in the browser window. If you have a <h1> title with a couple words, and you set a very large line height, it will also act kind of like spacing, like padding, like margin, but that’s not what line height is for.
Consider a <p> block of text. If that text is long and wraps in the browser window onto multiple lines, then line height is needed to define the vertical space surrounding each line of text. With very small line height, the text may actually overlap itself.
Line height is something you want to set as a ratio with the font size. One line height value, like say 26px, might work on fonts of sizes between maybe 15px and 24px, but at both those extremes, it’s not perfect. At larger sizes, 26px is a bit cramped. At small sizes, it’s a bit wide. This is why line height is often set as a percentage in line with the font size.
You could even create spacing by setting a thick border on something with the same color as the background! But that’s not really what it’s for either.
Read up on the box model: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
In CSS, how the box model works visually can even be adjusted with the box-sizing attribute. Read here: https://css-tricks.com/box-sizing/
The normal way it works is if you tell a <div> to be 100px wide, it will be. Unless you add 10px padding. Then the box actually becomes 120px wide. But if you add 2px border, it now really becomes 124px wide! This is because padding and margins add to the overall width/height of a block.
But box-sizing:border-box; changes this. If you set 100px wide and add 2px border and 10px padding, the visual width of the block will still be 100px.
It’s not meant to be confusing!
margin - separates block/inline-block elements from each other between the borders.
padding - separates content from its own border on the inside of the border.
line-height - vertical space of inline elements when other inline elements wrap above and below.
border - after the content and padding but before the margin. If the borders of two elements like <td> touch, use border-collapse to merge them together to avoid “double-border” issue.
box-sizing - defines whether width/height of blocks includes padding and borders.
<br> - a line break to force inline elements to wrap to the next line. Do not use simply as a spacer!
<p> - a paragraph. This is a block element, not an inline element. It’s a container for inline elements to go in.
Use appropriately!
While I understand your intention I do need to point out that vertical margins cannot be applied to inline elements and will have no effect. Vertical padding can be applied to inline elements but if such padding is greater than the line height then the element will overlap with the lines above and below and therefore is not best practice.
I believe you probably meant to talk about block or inline-block elements anyway but thought it worthwhile to point out 
3 Likes
Add line-height to your css.
i.e. line-height: 2;
@Argent: the use of line-height for this issue has already been suggested, and @PaulOB has explained why it is not the answer here.
1 Like
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.