TIL A nice way to use calc to get margin space

POSTED ON: Jan 07, 2022

I love it when bootstrap containers automatically create padding based on size.

// margin method
.container {
  margin: 2rem 5rem;
}


// using calc method
.container {
  max-width: calc(100% - 10rem);
  margin: 0 auto;
}

The margin method always keeps the content centered, which is one benefit.

But I like the calc method, because regardless of the screen size, there's a lot more control with math.

Related TILs

Tagged: css

TIL the alternate keyword

If 'alternate' appears along with the stylesheet keyword, the linked file is an alternative stylesheet. It won’t be applied to the document, but it will be ready for when we need it.

Mar 18, 2023

TIL Logical Properties

For that sweet sweet Internationalization you want to avoid directional words like 'left', 'right', 'top', and 'bottom'.

Mar 11, 2023

TIL Using pseudo-classes in your querySelector!

let notTuna = document.querySelectorAll('.sandwich:not(.tuna)')

Mar 02, 2023

Next: TIL map() only when you need itThe origins of 'map()' was to create methods that allow us to manipulate array data without mutating it. It's part of the whole set of methods to make functional programming easier in Javascript.
Previous: TIL solving the this keyword and it's execution contextThe this keyword references the current execution context of the function from where you’re calling using it. If it's used in a regular function, a arrow function, or a method changes the execution context of this.