Tags

I keep forgetting about the double gutter problem with nested containers. When you put padding on a parent and the child also has padding, you get twice the spacing you wanted.

The Problem #








        

.container {
  padding: 2rem;
}

.child {
  padding: 2rem;
}

Now your content is 4rem from the edge. Not what I meant at all.

The Fix #

Either remove padding from the parent or use box-sizing: border-box and plan for it. I usually just drop the parent padding when I realize what I have done.

Reply by email

Recent Posts

Recent Thoughts

Recent Stars