Loading ...
Sorry, an error occurred while loading the content.
 

margins for paragraphs

Expand Messages
  • Axel Berger
    A margin seens to be rather a well defined entity in style sheets, but there is one nasty exception: The top and bottom margins of paragraphs and headers apply
    Message 1 of 2 , Sep 29, 2007
      A margin seens to be rather a well defined entity in style sheets, but
      there is one nasty exception:
      The top and bottom margins of paragraphs and headers apply only to other
      visible elements. A well known example is the margin above a header
      which is not shown when that header is the first thing on a page. That
      may be fine, but those dropped margins still exist somewhere in the
      works and cause all kinds of trouble.

      One problem I have is an image with a small bottom margin on a dark
      background. Beneath that image is a DIV container with a white
      background, leaving a small dark stripe between it and the image. So far
      exactly what is wanted here. Now I place a paragraph inside the
      container. That paragraph has a wider top margin, which gets ignored by
      the DIV, so there's no white stripe on top. BUT the margin still applies
      versus the image and pushes the whole DIV downwards widening the black
      stripe - nasty!
      It gets worse if I have two unmargined containers overlying the black,
      say white and light gray, that sit flush against each other. Place a
      paragraph in each one and they get pushed apart exposing a black stripe.
      Even nastier, unexpected, and very undesirable.

      Is there any straightforward and easy solution for this or do I have to
      stick with my present workaround involving classes inside classes?

      Danke
      Axel
    • Cary
      I ll admit I m having trouble following this, but you might use padding on the div to create space between it and the paragraph it contains rather than using a
      Message 2 of 2 , Sep 29, 2007
        I'll admit I'm having trouble following this, but you might use
        padding on the div to create space between it and the paragraph it
        contains rather than using a margin on the paragraph. So for you
        example code you gave you could use this styling:

        <style type="text/css">
        .BLUE {
        margin: 0;
        padding: 20px;
        background-color: #0000FF;
        width: 250px;
        }
        .WHITE {
        margin: 0;
        padding: 0 0 1ex;
        background-color: #FFFFFF;
        }
        .GRAY {
        margin: 0;
        padding: 0 0 1ex;
        background-color: #E9E9E9;
        }
        P {
        margin: 1ex 5% 0;
        padding: 0;
        border: 0;
        background-color: #FF0000;
        }
        IMG {
        margin: 1ex 5%;
        padding: 0;
        border: 0;
        background-color: #FF0000;
        }
        </style>



        --- In ntb-html@yahoogroups.com, Axel Berger wrote:
        >
        > A margin seens to be rather a well defined entity in style sheets, but
        > there is one nasty exception:
        > The top and bottom margins of paragraphs and headers apply only to other
        > visible elements. A well known example is the margin above a header
        > which is not shown when that header is the first thing on a page. That
        > may be fine, but those dropped margins still exist somewhere in the
        > works and cause all kinds of trouble.
        >
        > One problem I have is an image with a small bottom margin on a dark
        > background. Beneath that image is a DIV container with a white
        > background, leaving a small dark stripe between it and the image. So far
        > exactly what is wanted here. Now I place a paragraph inside the
        > container. That paragraph has a wider top margin, which gets ignored by
        > the DIV, so there's no white stripe on top. BUT the margin still applies
        > versus the image and pushes the whole DIV downwards widening the black
        > stripe - nasty!
        > It gets worse if I have two unmargined containers overlying the black,
        > say white and light gray, that sit flush against each other. Place a
        > paragraph in each one and they get pushed apart exposing a black stripe.
        > Even nastier, unexpected, and very undesirable.
        >
        > Is there any straightforward and easy solution for this or do I have to
        > stick with my present workaround involving classes inside classes?
        >
        > Danke
        > Axel
        >
      Your message has been successfully submitted and would be delivered to recipients shortly.