• Visitors can check out the Forum FAQ by clicking this link. You have to register before you can post: click the REGISTER link above to proceed. To start viewing messages, select the forum that you want to visit from the selection below. View our Forum Privacy Policy.
  • Want to receive the latest contracting news and advice straight to your inbox? Sign up to the ContractorUK newsletter here. Every sign up will also be entered into a draw to WIN £100 Amazon vouchers!
Collapse

You are not logged in or you do not have permission to access this page. This could be due to one of several reasons:

  • You are not logged in. If you are already registered, fill in the form below to log in, or follow the "Sign Up" link to register a new account.
  • You may not have sufficient privileges to access this page. Are you trying to edit someone else's post, access administrative features or some other privileged system?
  • If you are trying to post, the administrator may have disabled your account, or it may be awaiting activation.

Previously on "HTML - Formatting a paragraph"

Collapse

  • NickFitz
    replied
    Originally posted by Ted Goat View Post
    As an aside, is it best practice to specify the <p> element's styling in the CSS rather than relying on the browser default?
    Pretty much what Bunk says:

    Originally posted by Bunk View Post
    Because the browsers often tend to do different things with their default CSS it's usually easiest to use a CSS reset stylesheet which strips away all default styling so you can start from fresh. The code you posted there looks like a (slightly crude) CSS reset. I would usually use that approach, and set the default myself to whatever the site needed.
    but it depends on the circumstances. In your case, you may well be perfectly fine with the browser defaults. It's when one is labouring under the tyrannical yoke of a graphic designer who insists that the integrity of their "vision" be maintained that one is better off resetting everything and then rebuilding from there.

    In fact, the main problem originally was lists. Back in the days of Netscape Communicator 4 v. Internet Explorer 4, Netscape decided that the space at the side of a list for the bullet points or numbers to sit in should be done with padding, whereas Microsoft chose to use margins. The relevant standards didn't say which it should be, so it was just one of those unfortunate cases where neither side was wrong, but their opposing decisions caused great misery for all. This led to people getting in the habit of resetting lists' margins and padding and specifying what they wanted, and then various more subtle cases were identified where slight variations could interfere with the pixel-perfection designers craved; and so CSS resets became a standard part of the armoury. Nowadays I find it hard to remember what the browser default styles are; I have to look them up if I need to know.

    Leave a comment:


  • Bunk
    replied
    Originally posted by Ted Goat View Post
    Ah yes! This was in the CSS I filched to use as a starting point:

    Code:
    div,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,p,.clearall,.clearb,form,img,textarea,body,label,fieldset,table,tr,td
    {margin:0;padding:0;border:0;text-decoration:none}
    I removed it and the browser's default is doing what I want.

    Thanks for your responses.

    As an aside, is it best practice to specify the <p> element's styling in the CSS rather than relying on the browser default?
    Because the browsers often tend to do different things with their default CSS it's usually easiest to use a CSS reset stylesheet which strips away all default styling so you can start from fresh. The code you posted there looks like a (slightly crude) CSS reset. I would usually use that approach, and set the default myself to whatever the site needed.

    Leave a comment:


  • Ted Goat
    replied
    Originally posted by NickFitz View Post
    I'm assuming there's already some CSS overriding the browser's internal stylesheet, as all browsers give paragraphs 1em top and bottom margin by default.
    Ah yes! This was in the CSS I filched to use as a starting point:

    Code:
    div,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,p,.clearall,.clearb,form,img,textarea,body,label,fieldset,table,tr,td
    {margin:0;padding:0;border:0;text-decoration:none}
    I removed it and the browser's default is doing what I want.

    Thanks for your responses.

    As an aside, is it best practice to specify the <p> element's styling in the CSS rather than relying on the browser default?

    Leave a comment:


  • NickFitz
    replied
    I'm assuming there's already some CSS overriding the browser's internal stylesheet, as all browsers give paragraphs 1em top and bottom margin by default.

    Just ditch the <br>s and add the default margins back in; assuming you don't want any margin at the sides, use

    Code:
    p {
        margin: 1em 0;
    }
    That's shorthand for top and bottom margins of 1em, and left and right margins of 0.

    The reason for adding both top and bottom margins is that other block elements may not have their own margins and might come before a paragraph. For example something like

    Code:
    <div><img src="gubbins.png" alt="Some gubbins" /></div>
    <p>Blahdiblah etc...
    or

    Code:
    <h2>Gubbins</h2>
    <p>Blahdiblah etc...
    needs a margin between the <div> or heading and the paragraph, or they'll be butting up against one another.

    If you specify top and bottom margins of 1em (which is a printer's measure going back pretty much to the time of Gutenberg) then the browser will automatically adjust the amount of space to match the size of the font used, in a typographically correct and aesthetically pleasing manner.

    Furthermore, due to something called margin collapsing, adjacent paragraphs will still only have 1em between them, as the bottom margin of the first element and the top margin of the second will automatically be overlaid such that only the larger value (1em, as they're both the same) applies. But the margin collapsing algorithm has aspects of such complexity that it has driven strong men and women to drink, or even worse, to management; so the less said about it the better. Just know that the bit of CSS I posted up there should be all you need

    Leave a comment:


  • mudskipper
    replied
    Originally posted by Zippy View Post
    Remove the </br> tag before the front-end guru lynch mob turns up.

    Yes you should style paras using CSS, as per kingcook's suggestion.
    I use <br/> tags all the time. If they want someone to spend days pissing about with CSS, they should hire someone who GAS.

    (but yes, for credibility, you should go CSS).

    Leave a comment:


  • Zippy
    replied
    Remove the </br> tag before the front-end guru lynch mob turns up.

    Yes you should style paras using CSS, as per kingcook's suggestion.

    Leave a comment:


  • kingcook
    replied
    <style>
    p {
    margin-bottom: 2em;
    }
    </style>

    Leave a comment:


  • Ted Goat
    started a topic HTML - Formatting a paragraph

    HTML - Formatting a paragraph

    I've had the misfortune of being dumped with a whole load of copy to transcribe into static html pages.

    Shouldn't complain though, it pays the bills

    Not an area I know a whole lot about so my question is very noddy for all you front end gurus.

    When I start a new paragraph, I want a new line between it and the preceding paragraph.

    So I do something like:
    <p>
    Some copy...
    </P><br/>

    Is that the most elegant way of doing it?

    I was just wondering if I could style my p element in CSS and give it padding or a margin (in the bottom dimension). Does that sound reasonable? and if so, what units should I use since I'm guessing line breaks will have some relation to the browser font size the user has chosen.

    Thanks in advance.

Working...
X