css spacing

Author: edieblu

src/posts/2020-04-28-CSS-Spacing/index.mdx

@@ -0,0 +1,70 @@
+---
+
+path: '/css-spacing'
+date: "2020-04-28"
+title: 'CSS and Spacing 📏'
+tags: ['css', 'design', 'UI']
+excerpt: 'From the article: Spacing in CSS'
+link: 'https://ishadeed.com/article/spacing-in-css/'
+
+---
+
+
+Spacing can be divided into two groups:
+- inner spacing (`padding`)
+- outer spacing (`margin`)
+
+## What's a margin collapse?
+Margin collapse happens when two vertical elements have a margin, and one of them has a greater margin than the other. In that case, the greater margin will be used, and the other will be ignored.
+
+🔨 To fix: Use a single direction margin, e.g.:
+```css
+.element:not(:last-child) {
+    margin-bottom: 1rem;
+}
+```
+
+🤔 If both the parent and the child have a margin, the child's margin will be collapsed.
+
+🔨To fix:
+- Add a `border` to the parent element OR
+- Change the child element `display` to `inline-block` OR
+- Add `padding-top` to the parent element.
+
+
+## Padding is not working
+Vertical padding doesn’t work with elements that have display: inline, like `<span>` or `<a>`.
+
+🔨 To fix: need to do `display: inline-block;`
+
+## RTL Styling
+
+Learn about [Right to Left styling](https://rtlstyling.com/posts/rtl-styling#introduction-to-rtl-styling).
+
+## Gaps in Flexbox layout
+
+Flexbox doesn't have a gap property, like `grid-gap`.
+
+🔨 to fix:
+- Add `padding-left` to the grid item AND
+- Add a negative `margin-left` with the same padding-left value to the grid parent.
+
+The reason: because the first card has padding-left while in reality it’s not needed. So it will push the wrapper to the left and cancel that unneeded space ([Demo](https://codepen.io/shadeed/pen/b4abf0f83804991925de43367562d93f?editors=1100)).
+
+## Margin bottom
+
+The last element should not have a bottom margin, as margin should only be between elements.
+
+🔨 To fix: cancel the unneeded spacing by adding a negative margin to the parent element.
+
+## `vmin`
+
+Viewport Minimum (vmin) – A percentage of the viewport width or height, whichever is smaller. 10vmin will resolve to 10% of the current viewport width in portrait orientations, and 10% of the viewport height on landscape orientations.
+
+## `vmax`
+
+Viewport Maximum (vmax) – A percentage of the viewport width or height, whichever is larger. 10vmax will resolve to 10% of the current viewport height in portrait orientations, and 10% of the viewport width on landscape orientations
+
+- `grid-gap: min(2vmax, 32px);`
+
+Use a gap equal to 2vmax, but it shouldn’t go above 32px.