300826 - margin and padding conflicts or links.

Status: RESOLVED INVALID

(Core :: Layout, defect)

Description

[Tom Hofman]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; nl-NL; rv:1.7.8) Gecko/20050511 Firefox/1.0.4
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; nl-NL; rv:1.7.8) Gecko/20050511 Firefox/1.0.4

I think there is a bug in the margin thing and padding thing..
When you define a <div style="margin: 8px; border: 1px solid #000000;"></div>
it'll make a border AFTER! 8 pixels of the screen.. when you do this with..

<center>
	<div style="text-align: center; width: 512px; height: 384px; background:
url('lightedware_monitor.JPG');">
		<div style="margin-right: 24px; margin-left: 24px; padding-top: 32px;
text-align: left;">
			Test text
			<p align="right">dsds</p>
		</div>
	</div>
</center>

That code gave the bugger thingie..

Reproducible: Always

Steps to Reproduce:
1. Copy paste the code
2. Change margin-top into padding-top
3. check the differences and compare with what the margin-left did

Actual Results:  
Well you'll see that one time you need to use margin to accomplish a white area
without moving the box and other times padding.

Expected Results:  
On margin I think it's supposed OUTSIDE the element a spacing, when padding
should do spacing INSIDE the element.

Comment 1

[Kevin Bryant]

Why is there no activity on this bug? Opera, Konqueror, and even IE can render my page correctly, but Firefox can't. I'd have to agree with the posters statement that the padding seems to be applied outside of the block level elements, either that or it is being applied after a percentage sized block's size has been calculated, which would have the same effect. I'd have to say that this is at least a high priority problem.

Comment 2

[Steve England [:stevee]]

Reporter, do you still see this problem with the latest Firefox 2? And if so, what about a trunk build?

If the problem is no longer present, please can you please close this bug as WORKSFORME. Thanks!

Comment 3

[Tom Hofman]

It's still there and aswell in Opera, I'm going to check on W3C definition for padding/margin effects and report back..

Comment 4

[Tom Hofman]

As seems to be:
http://www.w3.org/TR/REC-CSS2/box.html

Margin effects the next up object, but should it start after padding?

Anyways, this is a cross browser problem it seems..

Comment 5

[Samuel Sidler (old account; do not CC)]

-> Core::Layout for triage

Comment 6

[Samuel Sidler (old account; do not CC)]

Tom, did you try this in a trunk build or only Firefox 2.0.0.4? You can get trunk builds from:

http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/

Comment 7

[Daniel.S]

It took a while to get what you thought the bug is, but actually there's no but at all (except in IE's rendering..)

Let's take a look at the code above. Give every element a different background color and remove the p element with right alignd text.

The box containing the text "Test text" got left and right margin of 24 pixel and a padding-top of 32 pixel. From the right and left margin you assume that changing padding-top to margin top should make the padding area transparent.

However, CSS defines a nifty feature called collapsing margins (it's quite helpful in practice). That means, as long as the parent elements are not positioned or got top border or padding, the vertical margins collapse and automatically get the biggest margin defined.

In IE this doesn't work, because you've set height and width, which triggers the hasLayout bug in IE7 and below.