CSS - Negative Margin To Remove Parent's Padding

Denis Bobrovnikov picture Denis Bobrovnikov · Nov 23, 2010 · Viewed 7.6k times · Source

Is it a good practise to use negative margins to remove padding of wrapper element?

For example, which of the following code pieces 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

meder omuraliev picture meder omuraliev · Nov 23, 2010

Why not just declare padding:5px 0; so you don't have horizontal padding? Though I would argue that it's perfectly fine to use negative margins, that's what they're made for but if you can avoid them in the first place, do so.