problem with adding drop shadows in traditional method. Options

[sameer shaik]

we add negative margin values for top and left but why should we add values for bottom and left also.

why this?

margin: -5px 5px 5px -5px


why it cant be this?

margin: -5px 0px 0px -5px


because we want our image to move top and left in negative direction but why should we also add values for right and bottom sides?

pls clarify thanks...

[pandy]

You can use just "margin-top: -5px, margin-left: -5px", that is leave the other values out altogether.

Theoretically what you suggest would stretch the image. You move the top-left margins but say the bottom-right ones should stay where they were. I don't know if any browser does this now, I can't find one. Maybe the rules have changed. I'm sure that at one point it was possible to stretch a box with margins in the most CSS aware browsers but I don't manage to do it now.

[Christian J]

we want our image to move top and left in negative direction but why should we also add values for right and bottom sides?

In the first example a block element like a DIV should be moved. In the second it should become stretched, assuming that the width is "auto" (otherwise it will move there, too). Can't remember exactly why all this happens, the W3C spec can be very vague about things like this.

Images (like in your example) have intrinsic width, so maybe they can't be stretched this way.

[Christian J]

I'm sure that at one point it was possible to stretch a box with margins in the most CSS aware browsers but I don't manage to do it now.

It still works:

CODE

<style type="text/css">
body {
border: solid blue;
margin: 3em;
width: 20em;
}

p {
border: 1px solid red;
margin: 0;
}

p#t {margin-top: -5px;}
p#r {margin-right: -5px; width: auto;}
p#rw {margin-right: -5px; width: 20em;}
p#b {margin-bottom: -5px;}
p#l {margin-left: -5px; width: auto;}
p#lw {margin-left: -5px; width: 20em;}
p#lr {margin-left: -5px; margin-right: 5px; width: auto;}
p#lrw {margin-left: -5px; margin-right: 5px; width: 20em;}
</style>


<p id="t">top</p>
<p id="r">right, auto width</p>
<p id="rw">right, explicit width</p>
<p id="b">bottom</p>
<p id="l">left, auto width</p>
<p id="lw">left, explicit width</p>
<p id="lr">left+right, auto width</p>
<p id="lrw">left+right, explicit width</p>

[pandy]

Yeah. My test DIVs had a width.

I just want to point a thing out.

but why should we add values for bottom and left also.

That is the springing point. You CAN leave them out. But you don't do that in you example. Setting them to zero isn't leaving them out. It's specifying exactly how wide they should be, even if that width is 0.

[Jaycbrf4]

If you leave them out, they will default to browser defaults
http://www.w3.org/TR/CSS21/sample.html

[pandy]

It isn't likely there will ever be a browser that adds margins to IMG.