• 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.
  • FREE workshop: Preparing contractors for Autumn : Weds 29th Sep at 7.15pm. More details here.

HTML - Formatting a paragraph

Collapse
X
  •  
  • Filter
  • Time
  • Show
Clear All
new posts

    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.

    #2
    <style>
    p {
    margin-bottom: 2em;
    }
    </style>
    Contracting: more of the money, less of the sh1t

    Comment


      #3
      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.
      +50 Xeno Geek Points
      Come back Toolpusher, scotspine, Voodooflux. Pogle
      As for the rest of you - DILLIGAF

      Purveyor of fine quality smut since 2005

      CUK Olympic University Challenge Champions 2010/2012

      Comment


        #4
        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).

        Comment


          #5
          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

          Comment


            #6
            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?

            Comment


              #7
              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.

              Comment


                #8
                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.

                Comment

                Working...
                X