Why is the padding of this <DIV> not respected (at the bottom)?

I have a padded DIV (containing other/sub-DIVs and a DL) followed by some text:

<div>    # the padded/main div

  <div>
    <div>
    </div>
  </div>
  <div>
    <dl>
      <dt></dt><dd></dd>
      <dt></dt><dd></dd>
    </dl>
  </div>

</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus an开发者_如何转开发te dui, et venenatis enim. Aliquam in massa...

How come there appears no padding at the bottom of the main DIV?

(There is no padding space between the main div's content and the following text.)

Thanks for any help with this! Tom

You are confusing padding with margin. margin is the property that would define space between the main div and the bottom text.

In your example, it appears that you are trying to use a newline to cause spaceing within html. This will not work. As stated in previous answers, you must set the css margin-bottom property to cause spaec to appear after the bootom of a div and the start of the next HTML element

If you want to use padding and not margin then change to add some way to identify the outer div (I used an ID):

   <div id="outerdiv">    # the padded/main div 
        <div> 
            <div> 
            </div> 
        </div> 
        <div> 
            <dl> 
                <dt></dt><dd></dd> 
                <dt></dt><dd></dd> 
            </dl> 
        </div> 
    </div> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus ante dui, et venenatis enim. Aliquam in massa... 

and add CSS such as:

#outerdiv
{
    padding-top: 1em;
    padding-bottom: 1em;
}

EDIT: see it a work here: http://jsfiddle.net/yvaPG/

Thanks for your quick hints!

I was finally able to track the problem down:

The

<dd></dd>

element had a "float:left;". This apparently caused the following text to move "left/up".

My solution:

I inserted an empty

<div></div>

with a "clear:both;" between the dd element and the following text.

If anybody has a more elegant solution, I'd still be interested!

Tom a more reasonable approach would have been to define a seperate CSS class of;

.clearfix {clear:both; display:block;}

This would then allow you to call this div should you require it in other places throughout the page. Simply replace the with to ensure this change continues throughout and isn't reset by the removal of a CSS reset throughout the rest of the page/setup

Regards