Negative margins can be helpful

The use of negative margins in vertically aligned block elements can help to create creative presentations. the heights of a containing block element is the compounded valued of each and all block level children's heights being that margins are included in this calculation, the use of negative margins can compress the parents height;

by fezec

HTML

<div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec bibendum mi a augue mattis eget pellentesque ipsum pharetra. Phasellus facilisis, turpis fringilla egestas fringilla, lectus ligula suscipit velit, eleifend. </p>
        <p class="punch">
et porttitor metus neque vel nunc. Cras elementum mollis libero, a hendrerit tellus sollicitudin nec. Integer venenatis diam nec sapien dapibus sed molestie lacus laoreet. Sed in accumsan nisl. Phasellus neque nunc, 
        </p>
   <p>egestas ut consectetur nec, ultricies vitae tortor. Sed lacus dui, malesuada ut sodales eu, scelerisque ut dui. Aliquam ac dignissim est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et ipsum non tortor pretium 
        </p>
        <p class="mond">
            egestas ut consectetur nec, ultricies vitae tortor. Sed lacus dui, malesuada ut sodales eu, scelerisque ut dui. Aliquam ac dignissim est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et ipsum non tortor pretium 
        </p>
</div>
<div>
 you can view me
</div>

CSS

div{
    background:silver; border:1px solid black;
}
p{margin: 1em;border:1px dashed black; }
p.punch{
    background:white;margin:1em 0px 1em 25%;border:1px solid yellow; border-right:none; text-align:center;
}
p.mond{
    background:#333; color:white;margin:1em 3em -3em -3em;

}