Skip to main content
CSS-Tricks
  • Articles
  • Alamanac
  • Guides
  • Videos
  • Books
  • Newsletter
Search

Articles Tagged
margin

11 Articles
{
,

}
Direct link to the article Manuel Matuzovic: max() Trickery
logical properties margin max max-width

Manuel Matuzovic: max() Trickery

By way of a post by Manuel Matuzović which is by way of a demo by Temani Afif.

.wrapper {
  margin-inline: max(0px, ((100% - 64rem) / 2)); 
}

You’d be doing yourself a favor to read Manuel’s breakdown of …

Avatar of Geoff Graham
Geoff Graham on Oct 18, 2022
Direct link to the article Please Give Me Some Space
border-spacing gap inset margin shape-outside translate

Please Give Me Some Space

There’s all kinds of ways to do that. Some more advisable and better-suited for certain situations than others, of course.…

Avatar of Geoff Graham
Geoff Graham on Jun 3, 2022
Direct link to the article You want enabling CSS selectors, not disabling ones
margin selectors

You want enabling CSS selectors, not disabling ones

I think this is good advice from Silvestar Bistrović:

An enabling selector is what I call a selector that does a job without disabling the particular rule.

The classic example is applying margin to everything, only to have to remove …

Avatar of Chris Coyier
Chris Coyier on Aug 31, 2021 (Updated on Sep 1, 2021)
Direct link to the article margin-inline-end
margin

margin-inline-end

The margin-inline-end property in CSS defines the amount of space along the outer ending edge of an element in the inline direction. It’s included in the CSS Logical Properties Level 1 specification, which is currently in Working Draft.…

Avatar of Geoff Graham
Geoff Graham on Jan 14, 2021 (Updated on Jan 15, 2021)
Direct link to the article margin-inline-start
margin

margin-inline-start

The margin-inline-start property in CSS defines the amount of space along the outer starting edge of an element in the inline direction. It’s included in the CSS Logical Properties Level 1 specification, which is currently in Working Draft.…

Avatar of Geoff Graham
Geoff Graham on Jan 14, 2021 (Updated on Jan 15, 2021)
Direct link to the article The Rules of Margin Collapse
margin margin collapsing

The Rules of Margin Collapse

Josh Comeau covers the concept of margin collapsing:

This idea might sound simple, but if you’ve been writing CSS for a while, you’ve almost certainly been surprised when margins either don’t collapse, or they collapse in weird and unexpected ways.

…
Avatar of Chris Coyier
Chris Coyier on Dec 30, 2020
Direct link to the article Max Stoiber’s Strong Opinion About Margins
margin

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?!…

Avatar of Chris Coyier
Chris Coyier on Mar 31, 2020
Direct link to the article Negative Margins
margin negative margin

Negative Margins

PPK digs into the subject, which he found woefully undercovered in web tech documentation. Our entry doesn’t mention them at all, which I’ll aim to fix.

Agree on this situation:

This is by far the most common use case

…
Avatar of Chris Coyier
Chris Coyier on Mar 9, 2020
Direct link to the article How Auto Margins Work in Flexbox
flexbox margin

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. …

Avatar of Chris Coyier
Chris Coyier on Jan 6, 2020
Direct link to the article The peculiar magic of flexbox and auto margins
alignment centering flexbox margin

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 …

Avatar of Robin Rendle
Robin Rendle on Jul 27, 2018 (Updated on Jul 31, 2018)
Direct link to the article Good ol’ Margin Collapsing
margin

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…

Avatar of Chris Coyier
Chris Coyier on Mar 22, 2018

CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter

DigitalOcean
  • About DO
  • Cloudways hosting
  • Legal stuff
  • Get free credit!
CSS-Tricks
  • Write for us!
  • Advertise with us
  • Contact us
Social
  • RSS Feeds
  • CodePen
  • Mastodon
  • X
Back to Top