CSS Margin Guides
There is no right or wrong way to do CSS margins, but there are a lot of iffy ways!
This is a collection of top and trending guides written by the community on subjects related to CSS Margin concepts. For all things CSS, check out the CSS tag! Please contribute more posts like this to help your fellow developer in need.
CONTENT, PADDING, MARGIN AND BORDER: THE BOX MODEL
In this article I will be focusing on the major differences between content, padding , margin and border in the simplest way possible for front-end developers, but no matter your role feel free to read.
CSS adding margin to all children
Sometime I want to add margin to all children in case that they get stacked on mobile devices. It would be nice if I have a utility CSS that does the job and can be applied to a parent element.
CSS Margin Collapse
Margin collapse is one of the tricky things about margins in CSS and it's a foundational concept in understanding the CSS Box model. Not knowing when a margin collapse, can be a point of frustration and when they do you just have to deal with it. This post will attempt to introduce and treat this concept in a beginner-friendly approach with code snippets and images from the browser Developer Tools.
Mastering CSS Margin Collapse With Practical Examples
Margin collapse is an interesting concept in CSS margins that you should know, understand and be conscious of. It is the process where you apply a margin of 10px on top, the bottom of an element, apply another 10px on top, the bottom of the next element, and end up having a 10px space between the two-element instead of 20px.
Don't Interchange Margin and Padding
As a consequence, I add CSS margins and paddings every day. It’s a magical feeling to see a button come to life with a little
marginpadding.
Why I fell in love with margin-top
Use
margin-toponly.
Using Sass' @each and @for for Bootstrap-Like Behavior of Margin & Padding Classes
Bootstrap includes margin and padding functionality that allows you to decide on what side of the element the margin or padding should be applied and how much of it should be layered on (multiple of the base font-size).
Happy CSS Margin coding!
