Take for example this image below of a project I am working on... The Blue background is a DIV that is inside of another DIV that wraps all that sidebar contact section together. To get the Blue BG DIV
to have the round border and not have a gap because of the parents margin/padding I had to use negative marginsmargin: -9px -2px 8px -6px;
So the question is, is it bad practice to use Negative Margins or Padding?
Using negative margin is considered bad practice as it makes the code more complex and difficult for developer's understanding. Generally there is no need to use negative margin, unless and until you have made any error elsewhere.
Use a margin when you want to adjust the spacing of an element and use padding when you want to adjust the appearance of the element itself. Margins aren't a part of the element; padding is.
No. Padding only takes positive values. Negatives are ignored or treated as 0, which would have the same effect: none.
No; it's not bad practice, so long as you're aware of the fact you're using negative margins, and that this necessarily 'pulls'/'moves' elements from their otherwise-'normal' position.
Why would you even worry about this?
Negative margins are a great way to negate the padding inside of an element for headings etc. I have found no negative results (pardon the pun) of using negative margins. E.g:
<div style="padding:10px;border:1px solid blue;"> <div style="margin:-10px -10px 10px -10px;backgorund-color:yellow;">Full width heading</div> The content of the div which is now padded in by ten pixels. <div>
I was worried about negative margins when I first discovered them but have found them to be very useful is so many layout areas- actually reducing div counts and cleaning up layout code.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With