Skip to main content
CSS is fun and cool and I like it.
Article

Max Stoiber’s Strong Opinion About Margins

Going with that title instead of the classic developer clickbait version Max used. ;)

We should ban margin from our components.

Don’t use margin?! This thing I’ve been doing my entire career and don’t have any particular problems with?!

Well, that’s not exactly Max’s point. The point is that any particular component doesn’t necessarily know what context it is in, so it also doesn’t know what kind of spacing is necessary around it. His solution? Leave it to a … Read article “Max Stoiber’s Strong Opinion About Margins”

Link

Negative Margins

Article

How Auto Margins Work in Flexbox

Robin has covered this before, but I’ve heard some confusion about it in the past few weeks and saw another person take a stab at explaining it, and I wanted to join the party. … Read article “How Auto Margins Work in Flexbox”

Article

The peculiar magic of flexbox and auto margins

In front-end development, there are often times when I know that I don’t know something. I might know enough to know what CSS to search for, but I have absolutely no idea how to use it or what the right syntax is. Somehow, in my head, there appears to be a filing cabinet that’s entirely empty, and when I try to look something up, all I find is an almost illegible sticky note instead.

One topic like this (which is … Read article “The peculiar magic of flexbox and auto margins”

Article

Good ol’ Margin Collapsing

Here’s a one-sentence blog post about margin collapsing: When two block elements are stacked on top of one another, the vertical space between them is the larger between the one on top’s margin-bottom and the one on the bottom’s margin-top.

It’s a bit weird and ascii-shruggy. Couple caveats with them, as you might expect. … Read article “Good ol’ Margin Collapsing”

Almanac

margin

The margin property defines the outermost portion of the box model, creating space around an element, outside of any defined borders.

Margins are set using lengths, percentages, or the keyword auto and can have negative values. Here’s an example:

.box {
  margin: 0 3em 0 3em;
}

margin is a shorthand property and accepts up to four values, shown here:

.box {
    margin: <margin-top> || <margin-right> || <margin-bottom> || <margin-left>
}

If fewer than four values are set, the missing … Read article “margin”