6 Replies Latest reply on Jun 9, 2010 11:22 PM by martcol

    Decreasing space between lines

    Szaint

      I want to decrease the line space between two chunks of text. One line is a header (h3) followed by paragraph text (p). I want the paragraph text closer to the header.

       

      Check out this page for an example:

      http://www.jgraveslawyers.com/employment.html

       

      There is a blue Heading which says "Employment Discrimination" and I want the text under it to be closer.

       

      Thanks.

        • 1. Re: Decreasing space between lines
          Ben M Adobe Community Professional

          This is not actually a line-spacing issue as you might suspect, but rather a margin issue with the inherit margins of the h4 and p tags.  What you need to do is add the following:

           

          <p style="margin-top:0;"> or <h4 style="margin-bottom:0;">

           

          You can play with that to meet your specifications.  I would recommend doing that to one or the other or playing with a combination.  I wouldn't recommend doing this for all h4 or p elements though so using inline styles is probably the best way to go.

          • 2. Re: Decreasing space between lines
            Szaint Level 1

            Thanks a lot. What are inline styles?

            • 3. Re: Decreasing space between lines
              Richard_vav

              Inline styles will only effect the one element (paragraph, h3 tag, word, image etc.) that the style is contained within whereas an external style can effect every occurance of the element throught the site accross every page it appears on.

               

              Richard

              • 4. Re: Decreasing space between lines
                John Waller Adobe Community Professional & MVP

                <p style="margin-top:0;"> or <h4 style="margin-bottom:0;">

                 

                FYI, style="margin-top:0;" and style="margin-bottom:0;" in the above code are inline styles, so-called because they're inline with the HTML (attributes written as part of the HTML tag) rather than in an external, linked stylesheet.

                 

                Generally, inline styles should only be used as a last resort because they defeat the main purpose of styles which is to separate page structure (HTML tags which form a web page) from presentation (or formatting).

                 

                Don't mix your CSS with your HTML unless you absolutely have to.

                • 5. Re: Decreasing space between lines
                  Szaint Level 1

                  Thanks a lot everybody. So the inline styles get written into the html source code and not the css? Where exactly should I input the inline styles?

                  • 6. Re: Decreasing space between lines
                    martcol Level 4

                    I think the whitespace that you want to reduce is common to all those elements?

                     

                    If you find this rule in your CSS:

                     

                    #left_column p

                     

                    try adding:

                     

                    margin-top: ??px;

                     

                    But of course, use a value that suits for ??.

                     

                    As for inline styles, if you want the same effect accross the page/site I would suggest using your existing CSS and not inline styles.

                     

                    The  only issue that might arise from that rule is that it will add the same to all paragraphs on the page including a second paragraph.  If you only want to adjust the space between the first paragraph and the header then you could add a class to the first paragraph:

                     

                    <p class="first">

                     

                    then write a new rule for

                     

                    p.first {

                         margin-top: ??px

                    }

                     

                    Doing it like this, whatever element you applied class="first" would have the same top margin.

                     

                    If you want to use an inline style then John's post shows you where it goes.  You just need to find the tag in your code and pop it in there.

                     

                    Martin

                     

                    Just one more thing: one bit of advice above advises that you shouldn't use a rule on the <h4> or <p> tag because it will add that to all those elements that link to that CSS.  In this case it will only affect your <p> elements that are in #left_column.