CODEWITHSUNDEEP
csshtmltext
mowwwalker
mowwwalker

Reputation: 17334

Proper way to space text?

I learned the basics of web design a few months back and am trying to fix up a basic site I set up to adhere to the standards and look a little neater. The way I wrote it was with non-breaking space to separate my paragraphs. I'm sure you're all tearing your hairs out over it, but that's why I'm trying to improve.

I'm still unsure, however, what the right way to space out text is. My first though is to use margins, which would mean setting the display of the paragraph element to block. Figuring it's wrong to change the structure of element considering there are probably more suitable elements to use, I decided to check some sites out to see how they do it. Each one I checked used the display:block and margin properties in CSS.

Is this the proper way to do it? Is there something in HTML5 that replaces it? If I do use HTML5 does that mean that older browsers won't display it properly?

Upvotes: 0

Views: 405

Answers (3)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201568

The p element is a block element, in HTML terms and by default also in CSS terms. So you can just set margins on it if you prefer something different from the default margins (no left or right margin but a top and bottom margin corresponding typically to one empty line each). What you specifically set in CSS depends on what you wish to achieve, which is not obvious from the question.

The default rendering where paragraphs are separated by the equivalent of empty lines follows the practices of simple office automation systems and old typewriters. If you prefer a more traditional, book-like rendering, you can replace the empty lines by first-line indentation, e.g.

p { margin: 0; text-indent: 1em; }

Upvotes: 1

huzzah
huzzah

Reputation: 1805

It sounds to me like you are wanting to control the space BETWEEN your paragraphs, is this correct? You do not have to set your p element to display as a block. If you would like your paragraph spacing to be consistent between all browsers, I would suggest first thing is to make sure all your browsers are using the exact same spacing by resetting margins to nothing. Check out Eric Meyer's very famous CSS reset to give you a nice clean slate to start with. Next, in your CSS, you would set a margin for your paragraphs of however much space you'd like between them. Please note if you just use the margin: property instead of say, margin-bottom, your paragraphs will be double what you intend (margin-top of 2nd paragraph will add to the margin-bottom of your first paragraph, and so on).

With it all reset, you might put a rule like this in your CSS:

p {
 margin-bottom: 16px;   /*  Sets the margin only below the paragraph element  */
 text-indent:  10px;    /*  Indents the first line of your paragraph   */
 }

Also, keep in mind that CSS resets tend to tear out a LOT of a browser's defaults for your markup, so remember that when your h1 tag seems to be small and not bold anymore! Hope this helps.

Upvotes: 0

Rogel Garcia
Rogel Garcia

Reputation: 1915

Use tag <p> for each paragraph.

HTML 5 is backward compatible.

P tag is not exclusive of HTML 5. It works on all versions of HTML.

Upvotes: 2

Related Questions