Solved: Question about CSS margins

tomdkat · Apr 8, 2008

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 · Apr 8, 2008

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 · Apr 8, 2008

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 · Apr 9, 2008

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 · Apr 9, 2008

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 · Apr 9, 2008

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

tomdkat · Jun 20, 2008

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

Log in or Sign up

Solved: Question about CSS margins

tomdkat Retired Trusted Advisor Thread Starter

Attached Files:

before.jpg

after.jpg

amanxman

tomdkat Retired Trusted Advisor Thread Starter

amanxman

tomdkat Retired Trusted Advisor Thread Starter

amanxman

tomdkat Retired Trusted Advisor Thread Starter

Sponsor

Welcome to Tech Support Guy!

E-commerce question: "Buy Now" button

Web Design Question!

Solved: Question about CSS margins

tomdkat Retired Trusted Advisor Thread Starter

Attached Files:

tomdkat Retired Trusted Advisor Thread Starter

tomdkat Retired Trusted Advisor Thread Starter

tomdkat Retired Trusted Advisor Thread Starter

Sponsor

Welcome to Tech Support Guy!

Useful Searches