Entry: Post

Entry Module
Entry

A Dose of Negativity

Post Header Aside
Comments Actions Snippet
Comments Population
Comment Creation Ability
Post Content

If you have a padded content, everything in it will be bound by the padding around it.

But how do we expand an element to the edges of the container, disobeying the padding – something like a full-width picture.

We use negative left and right margins to offset the spacing brought about by the padding.

Negativity only for margins

The tendency of the negative margin is to, instead of inserting the specified space, it allows the content to fill in a space to that direction. So, for margin-left: -1rem, it will allow the content 1rem at the left – couple that with a margin-right: -1rem, it will allow the content 1rem at the right. That will offset the 1rem padding around the container.

See the Pen A Dose of Negativity by Brian Dys Sahagun (@BrianSahagun) on CodePen.1820

As tested on the img element, margin-right does not work – so we wrap the image in a div and apply the negative margins on that element.

You can use negative margins to offset/correct unwanted spacings around elements.

Comment Module
Comments
Comments Header Aside
Comments Actions Snippet
Comments Population
Comment Creation Ability

There are no comments.

Comment Creation
Comment Author Comment Creation
Comment Author Name Creation
Comment Author Email Creation
Comment Author Website URL Creation