Box Model

CSS treats each HTML element as if it lives in its own box (we have a tactile demonstration). You can set several properties that affect the appearance/dimensions of these boxes.

The properties of the box we can control with CSS are element margins, and padding for each box with CSS. Here is a breakdown of what each means:

1. Border - Every box has a border (even if it is not visible or is specified to be 0 pixels wide). The border separates the edge of one box from another.
2. Margin - Margins sit outside the edge of the border. You can set the width of a margin to create a gap between the borders of two adjacent boxes.
3. Padding - Padding is the space between the border of a box and any content contained within it. Adding padding can increase the readability of its contents.

Pixels

The values of these properties are usually written in pixel units (px), but sometimes also in percentages (percentages of the screen), or em (relative to other elements). Legibility can be improved by controlling the width of boxes containing text.

Pixels are the smallest unit of a computer screen. The physical size of a pixel varies depending on your computer's resolution. For example, a laptop with a screen resolution of 2560 by 1600, may have a pixel density of 227 pixels per inch, or PPI. This means an object on the screen that is 200 pixels wide and 200 pixels high will be roughly size of a US quarter on this laptop screen.

Let's talk about color: Web Colors