Solved: Question about CSS margins

tomdkat · 08:06 PM

So, I've been playing with some nested DIVs and noticed something strange.

Here is the HTML in question:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
  <title>DIV top margin</title>

  <style type="text/css">
.inner {
  border: 1px solid black;
  display: block;
  margin-right: auto;
  margin-left: auto;
  width: 220px;
  height: 280px;
  margin-top: 10%;
}
.outer {
  display: block;
  width: 800px;
  height: 600px;
  margin-right: auto;
  margin-left: auto;
  background-color: #99ffff;
}

  </style>
</head>
<body>

<div class="outer">
<div class="inner">inner DIV</div>

</div>

</body>
</html>

This produces a DIV that is 800px X 600px with a colored background. Inside that DIV, there is another DIV with the text "inner DIV" and a 1px border. Now, the inner DIV has a top margin of 10%.

What's strange is the parent DIV has this 10% margin applied to it!!! If I add a border to the outer DIV OR if I add some text to the outer DIV, the 10% margin of the inner DIV is applied to inner DIV and not the outer DIV.

Why is this?

Peace...

amanxman · 08-Apr-2008, 05:01 PM #2

Hey,

What is the end result you actually want? Which one, and what margins with what borders?

Let us know and i'll write fixed css for u

Ta

tomdkat · 08-Apr-2008, 08:05 PM #3

I've got the CSS worked out such that the 10% margin applies only to the inner DIV. The second attachment shows what I'm after. I'm asking why the 10% margin applies to the outer DIV when it's specified on the inner DIV unless the outer DIV has a border or text of its own.

Peace...

amanxman · 09-Apr-2008, 05:43 AM #4

It's a padding bug - wack a touch of padding to the top of the outer div and you'll be sweet... for example:

.outer {
display: block;
width: 800px;
height: 600px;
margin-right: auto;
margin-left: auto;
background-color: #99ffff;
padding: 1px 0 0 0;
}

that extra padding on the top (be it 1px or 10px or whatever stops the 10% margin on .inner affecting .outer.)
Hope that helps
amx

tomdkat · 09-Apr-2008, 10:45 AM #5

I guess adding the padding is the moral equivalent of adding a border or text to the outer DIV. Is this really a bug? I saw the behavior I described above in Firefox, Opera, Safari, and Maxthon 2.0.9 (IE6 engine). Or is the "bug" in the CSS rules governing margins?

Thanks!

Peace...

amanxman · 09-Apr-2008, 03:48 PM #6

i've never come across it before, it's quite strange so i would say bug, unless im missing something obvious!!

tomdkat · 20-Jun-2008, 01:14 PM #7

Well, I found the answer to this question on another forum. The behavior I experienced is correct, per CSS 2.1 specs. It's called margin collapsing. There is an easier to digest description here. The second link was easier for me to digest, at least.

Peace...

Search
Search in:
Show Threads Show Posts
Advanced Search

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)