CSS - Negative margin to remove parent pad

Question

Is it good to use negative margins to remove the wrapper pad?

For example, which of the following parts of the code is better to use?

<div style="padding: 5px;"> Shortened width string <div style="margin: 0 -5px;">Full width string</div> Shortened width string </div> 

or

 <div> <div style="padding: 5px;">Shortened width string</div> <div>Full width string</div> <div style="padding: 5px;">Shortened width string</div> </div> 

Answer 1

Why not just declare padding:5px 0; so you don’t have horizontal filling? Although I would say that it is great to use negative fields, for what they are created, but if you can avoid them in the first place, do it.

Answer 2

Well, this borders on hacking. While he used thpugh restraint, I would say that everything is in order. The key is to make sure that it is easy to read and understand. Add comments if you need.

Answer 3

The second is far superior. Negative fields should be avoided because they will cause problems in IE.

Answer 4

the negative edge of it is to hide the div .... Here is the trick use zoom: 1, position: relative

Here is an example

Problem:

 .container{ padding: 20px; } .toolbar{ margin-top: -10px ; } 

in IE, the red area of ​​the toolbar div is hidden. even we use zoom: 1. To get rid of this problem, we need to add a position: relative too.

Decision:

so your css class will become

 .container{ padding: 20px; } .toolbar{ margin-top: -10px ; zoom: 1; position: relative; }