I have a couple of questions about margin

1.) if it doesn’t need a margin, do you put one regardless? Because, if the other div’s in the group have one, do you put one on the one doesn’t need one, even if it just means giving it margin 0;? Or, do you just not give it a margin if it doesn’t need one.

2.) How come the red box is Top margin -50, and the one next to it is top margin -75. Wouldn’t they both be the same margin?

<div style="margin: 0; width: 50px; height:50px; background-color:#00ffff;">

<div style="margin: -50px 0 24px 55px; width: 50px;height:50px;background-color:red; ">

<div style="margin: -75px 25px 0 110px; width: 50px; height:50px; background-color:#ff00ff;">

Divs don’'t have default margins unlike ‘p’ elements or heading elements (to name but a few) so there is no need to add margin:0 to them.

On your second div you have margin-bottom of 24px so in order to pull your third div upwards you have to pull it up 50px + 24px = 74px to get it level. You have used -75px and that is why you are 1 pixel out and the boxes are not level.

Generally you should avoid magic numbers like the plague and let items flow naturally from each other.

However if all you are doing is moving fixed sized coloured blocks around then it probably doesn’t matter but you have been shown many times how to do this naturally and with little effort. Imagine if you changed the size of one of those coloured blocks then you would have to work out all those dimensions and margins again and changed every single line of inline code in your page rather than a simple tweak in a css file.

Yes you can use inline styles and yes you can use negative margins but no its not good practice and no it is not maintainable.


This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.