page viewed in different res settings (cont'd) — OZONE Asylum, home of the Mad Scientists

XML - XSL - XSLT - XHTML - CSS - DOM

page viewed in different res settings (cont'd)

This page's ID: 10945

Edit Post

Who can edit a post?	The poster and administrators may edit a post. The poster can only edit it for a short while after the initial post.

Your User Name:
Your Password:
Login Options:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	Ah, negative margins. Yes, those confused me at first, too. My first exposure to the idea was [url=http://bluerobot.com/web/css/center2.html]a centering technique at BlueRobot[/url]. I must admit that I didn't really stop to think about it at the time; it was just another way to position elements. Since then, though, I have thought about it some more and have come to terms with what at first appears to be a paradoxical concept. First off, your conception of margins is perfectly logical. Looking at the [url=http://www.w3.org/TR/REC-CSS2/box.html#box-margin-area]CSS Box Model[/url], it would appear that the margin would always be positive (or at least zero). The [url=http://www.w3.org/TR/REC-CSS2/box.html#mpb-examples]margin specs[/url] [b]do[/b] briefly mention that margins may be negative, but they don't really go into the implications of this. This is the way I think of it, and maybe it will help you. Look at the box model again. There are four areas: the content, padding, the border, and the margins. The content obviously can't be negative, because then the box wouldn't exist. The padding determines how much space there is between the content and the border, so it would make no sense for that to be negative either. The border, technically, can be considered a third "space," but it is usually invisible at zero pixels or a visible line, and I've never actually seen anyone use it for spacing purposes. For most people, the border is where the "box" officially ends, and the margin controls the amount of space between it and surrounding elements. All of that was pretty straightforward, and I'm sure you won't have a problem understanding it, but it's necessary to understand how the box model works to get a grip on margins. Now that we know that margins control the spacing between our element and surrounding elements, though, it should be easier to see where the negative margins come in. Put simply, the margins determine where the edge (the border) of the box starts. If I want a box to appear further down, I give it a positive top margin. If, however, I want the box to appear further up on the page, I give it a negative top margin. This same principal is applied at BlueRobot to achieve horizontal centering. If you want, try turning off (commenting out) the top margins and see what happens. You'll notice that the two text elements appear at the same vertical position (for what it's worth, I would have expected them to appear at the top of the background image; I'm not sure why they appear somewhere in the middle, but it doesn't really matter as long as its consistent). Logically, if you want one to go up and the other to go down, you're going to need to use negative margins for one and positive margins for the other. Not sure if this explanation makes any sense, but I gave it my best shot. This is how I understand negative margins, at least. Margins weren't originally intended to be used in this way, but sometimes you need to use tools in different ways to get the desired results. Loading...
Options:	Enable Slimies Enable Linkwords

« Backwards — Onwards »

Show Forum Drop Down Menu