Margin sometimes work sometimes don't under different doctype

Question

Consider the following HTML code:

<style>
    td {
        padding: 5px;
    }
</style>
<p>
    1233
</p>
<table>
    <tr>
        <td>
            <h3>Some text</h3>
        </td>
    </tr>
</table>

If I use <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">, the margin of <p> and <h3> does not work, but if I use <!DOCTYPE HTML>, the margin works.

What's more, when I add

h3 {
    margin: 25px 0;
}

to the style, the margin of them suddenly works even using HTML 4.0 doctype!

Why does this strange behavior happen? IE and Chrome behave the same on this issue, is this by design or something, it really confuse me.

I have a lot of pages written depend on this strange behavior, when I brought some CSS from other new components they defined margin then suddenly all these old pages broke. So I want to know what really happened.

@airi Adding `"http://www.w3.org/TR/html4/loose.dtd"` yields the same result. — Paul Chen, Apr 24 '14 at 05:03
read this one : http://stackoverflow.com/questions/255470/what-are-the-different-doctypes-in-html-and-what-do-they-mean — airi, Apr 24 '14 at 05:05
@airi OK, when I use ` `, the margin works. So it seems to be by design. — Paul Chen, Apr 24 '14 at 05:16
The code posted has no `margin` settings (except in the “What’s more” part). And “does not work” is not a problem description. Show an example that actually demonstrates the issue, and state the issue (e.g., specifying which `margin` setting has no effect even though it should). — Jukka K. Korpela, Apr 24 '14 at 05:28
@JukkaK.Korpela The margin in the first part comes from the browser, if you use F12 to inspect, you can see margin. — Paul Chen, Apr 24 '14 at 05:54
@JukkaK.Korpela I have a lot of pages written depend on this strange behavior, when I brought some CSS from other new components they defined margin then suddenly all these old pages broke. So I want to know what really happened. — Paul Chen, Apr 24 '14 at 06:04
You should clarify the question by editing the question itself. It should be understandable to future visitors as such, without peeking at comments (or answers). — Jukka K. Korpela, Apr 24 '14 at 06:32
What you added does not clarify the question; it does not help at all to se *what the question is about*. You seem to be referring to the presence or absence of *default* margins for some elements in some contexts, but you don’t say which elements. — Jukka K. Korpela, Apr 24 '14 at 07:37

score 3 · Accepted Answer · answered Apr 24 '14 at 07:54

The issue is the suppression of default top margins in some contexts in Quirks Mode. Thus, if you use Quirks Mode for some reason (and working with legacy pages is often a very good reason), you should explicitly set any vertical margins you want to have for elements. The other solution is to move away from Quirks Mode, slapping <!doctype html> at the very start, but this may completely ruin (or maybe just disturb a little) your pages, if they have been created so that their rendering relies on buggy behavior and oddities in browsers.

The issue can be demonstrated with a simple standalone document (with no CSS):

<!doctype html>
<p>
    1233
</p>
<table border>
    <tr>
        <td>
            <h3>Some text</h3>
        </td>
    </tr>
</table>

There is empty space, about one empty line, at the beginning before “123” as well as inside the cell before “Some text”. If <!doctype html> is removed, that spacing disappears (but other margins are retained).

The issue is well described in section 10.3.10 Margin collapsing quirks in HTML5 CR: “In quirks mode, any element with default margins [such as p or h3] that is the child of a body, td, or th element and has no substantial previous siblings is expected to have a user-agent level style sheet rule that sets its 'margin-top' property to zero.”

This feature relates to the browser tradition of suppressing top margins in contexts where they are normally useless or even disturbing. For example, if a heading element or a p element is the very first element in document body, or in a table cell, there is no need to separate it from the preceding content. The practice predates general availability of CSS.

score 1 · Answer 2 · answered Apr 24 '14 at 04:50

1

I'm don't really know what hapening but, thats what you see in chrome at HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" is not real margins it's a some browser initial styles you can see them in chrome dev tools: -webkit-margin-before, and -webkit-margin-after; this styles ovverides by margin.

For more information you better read specs on W3C, and use doctype html, or maybe html 4.0 strict.

answered Apr 24 '14 at 04:50

Anton Konyushevskiy

302
1
13

I've searched a lot, all I got is something called "collapsing margin", they say adding 1px padding to the parent will undo, but I applied 5px to the td and the margin still "collapse" – Paul Chen Apr 24 '14 at 05:06
http://www.w3.org/TR/CSS2/box.html#collapsing-margins I'm think initial browser margins, have a strange behavior (and different crossbrowser values) in transitional doctype, that's why every body use resets. Looks like browser can't set clearence to table, tr, td :( – Anton Konyushevskiy Apr 24 '14 at 05:35
Maybe I had to just live with it. – Paul Chen Apr 24 '14 at 06:08

Margin sometimes work sometimes don't under different doctype

2 Answers2