InternetingIsHard Part 2

A continuation of the previous post, on what I’ve learnt from https://internetingishard.com/html-and-css/.

1. Differences between padding and margin:

2. Use an empty 1px padded div to prevent margin collapse.
<div style='padding-top: 1px'></div>


3. Use border-box to force box width.
width: 200px;
box-sizing: border-box;

4. Resetting browser default style:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

5. Clearing floats: (No floating elements allowed on either the left or the right side)
clear: both;

6. Hiding overflow: (when no extra elements below floats)

overflow: hidden;