Some boxes ("block-level" elements) take up the full width of the screen, like this paragraph and the above h1 tag. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui modi perspiciatis nobis nemo provident dolores
Some boxes like this span and this link are "inline" elements. But they are boxes, nonetheless. Some properties (like background-color) can be applied to both inline and block-level elements. Other properties (like width) can only be applied to block-level elements. You can override how a box is treated using the display property (can be set to block, inline, inline-block, none, etc.)
Some boxes are for the purpose of enclosing other boxes. For example, this div contains two separate paragraphs. Notice that the styling I put on this div applies to everything in here.
Here is a second paragraph inside the div.
Here is a third paragraph inside the div.
You can get two block-level elements (like these divs) to be placed side-by-side by:
Here is the second div that we can get to fit side-by-side with the first. You'll need to create a div with its clear property set to both in order to clear the effect of floating divs.
All block-level elements can have padding, a border, and a margin applied. The width of the padding/border/margin can be specified using various units (pixels, percents, etc.), and can have the same value (or different values) for top, right, bottom, left. Here are some examples:
The box-sizing setting determines what is set by the width attribute. When set to content-box, width specifies the size left for the actual content of the box (this is the default setting). This means that padding, border, and margin widths are added to the outside of the box, and so the box is wider than its width.
When set to border-box, the width value identifies the total size of the box (excluding margins) and so the content area is smaller than the width of the box. We will prefer this setting!
