Cacher is the code snippet organizer for pro developers

/*There are 2 types of elements in CSS, BLOCK and INLINE

BLOCK level elements (<p>, <div>, <h3>) are, by default, the same height as the content between the tags, but they span the entire width of its container, even if the content itself doesn't. This is why block elements always start on a new line.
  You can adjust the width and the height of block elements in css. You cannot do so to inline elements.

INLINE level elements (<a>, <span>, <strong>) are the height AND WIDTH of their content.

You can change the default Block/Inline for elements with the display property.
display: block;
display: inline;
display: inline-block; //elements stay inline (butt up against) but can now take height and width values.
display: none; hide elements (until hover, e.g.)

THE BOX MODEL
Margins and inlines elements: inline element margin will only push out right and left, not top and bottom. UNLESS, you set display: inline-block.

COLLAPSING MARGINS happen when 2 margins of block elements meet, a top and a bottom.
(margins of floating and absolutely positioned elements never collapse)
Can occur:
1. Adjacent siblings
2. Parent and first/last child
3. Empty blocks

CONTENT WRAPS
Use a <div class="content-wrap"> around some content so that the parent section, e.g. can still be the width of the browser window and thus if background color is set it will span the window AND then you can set the width of the content-wrap to some width (use max-width here to prevent the width of the wrapper from staying at 950px e.g. when your window size is less than that) and margin auto to center the text.
This allows a full width page layout with content constrained by the width of the content-wrap.
And you can reuse the css for the .content-wrap class to center align other parts of the page.

Gaps between sections:
Often you will see that the margins of elements in top and bottom sections will push the sections away from each other leaving a gap. You can get rid of that by giving the sections enough padding such that these elements with margin are far enough away from the edges that their margins no longer push away the section above or below it.

MARGIN and PADDING
Padding: if you are trying to push content away from the edge of a its container
Margin: if you are trying to push other elements away from this element

Making elements clickable the entire length of the element: use padding to widen the clickable area because this adds to the element. As opposed to margin which just keeps the element at the same length and just pushes other elements away.
But, adding padding only works right and left, not top and bottom, for inline elements (see above)
Fix this by making the links display: inline-block

Floats
The parent of a floated element does not recognize the height of that floated element and will then collapse to the largest non-floated child element.
If there are only floated elements in the parent element, that parent will collapse completely. And elements that follow that parent will also not recognize the floated element.
When there are no elements to apply a "clear" to, the parent will need to self-clear, which will allow the parent to now contain the floated elements.
1. Overflow: overflow: auto; or overflow: hidden;
2. "Clearfix" Hack: add to parent
  .clearfix:after{
    content: "";
    display: table;
    clear: both;
  }

MIN-HEIGHT
Use min-height when you are floating 2 divs to the left to create 2 columns in which the content of the right column is shorter than then left column which causes the next left column to shift right over and up to fill up that space. Adjust min-height with enough pxs to keep that short right column longer than the taller left column and prevent shifting. 
  

BOX-SIZING
The default for box-sizing is: content-box - padding and border will INCREASE the total size of the box.
box-sizing: border-box - padding and bordr will be INCLUDED already when calculating the total size of the box. When you add padding and border it will push inward in order to keep the box at the same width and height. Unlike the default (border-sizing: content-box) which adds the padding and border onto the present width and height of the box -> it pushes out, not in.
The Box Model Fix
/* border box fix */
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

/*TEXT-ALIGN
text-align: center; 
1.Works with inline or inline-block elements only, not block. 
2.Also, does not work with floated elements since floated elements automatically become the width of their content

SPACES BETWEEN ELEMENTS (ARISES WHEN USING 'DISPLAY')
Comes from the Enter key after an <a> tage e.g.
<nav class="display">
  <a href="#">About</a>
  <a href="#">Work</a>
  <a href="#">Education</a>
  <a href="#">Contact</a>
</nav>
as opposed to:
<nav class="display"><a href="#">About</a><a href="#">Work</a><a href="#">Education</a><a href="#">Contact</a>
</nav>
Option: set font-size: 0; in the parent and the reset fon-size: xxrem; in the afftected element, the links for example: a { font-size: 1rem; } The 0 font-size in the parent makes the space 0 size so effectively disappears.

Option: float the <a> elements instead. 
Keep in mind: 
1.When using FLOAT, the display property has no effect. So, when floating INLINE elements the browser will automatically switch the display of the element to BLOCK so you do not have to declare display: inline-block on the <a> tags in order to add padding.
2.When you use FLOAT without specifying a WIDTH, the floated element will automatically be the same width as its content.