Negative Margin Demo

by audetwebdesign

HTML

<div class="wrapper">
    <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin elementum
            nisl pellentesque augue consequat vestibulum vehicula quam suscipit. In
            hac habitasse platea dictumst.</p>
        <p class="lefty">Sed ipsum ante, dictum vel rhoncus id, pretium in est. Curabitur aliquam
            tristique mattis. Proin arcu dolor, tincidunt volutpat faucibus non, tristique
            vel urna. Duis non dictum urna. Nam adipiscing ligula elit, eget commodo
            ante.</p>
        <p class="righty">Curabitur aliquam tristique mattis. Proin arcu dolor, tincidunt volutpat
            faucibus non, tristique vel urna. Duis non dictum urna. Nam adipiscing
            ligula elit, eget commodo ante. Nullam interdum augue eu lorem pharetra
            tristique.</p>
    </div>
</div>

CSS

.wrapper {
    outline: 1px solid blue;
    padding: 40px;
}
.content {
    outline: 1px solid red;
    background-color: #D8D8D8;
}
.content p {
    outline: 1px dotted blue;
    margin: 0 0 0 0;
    text-align: justify;
}
.content p.lefty {
    margin-left: -20px;
}
.content p.righty {
    margin-right: -20px;
}