Box Model
Every box is composed of four parts (or areas), defined by their respective edges: the content edge, padding edge, border edge, and margin edge.
# Introduction: Inline VS Block elements
Each HTML element rendered on the screen is a box, and they come in two flavors: “block” boxes and “inline“ boxes.
HTML is made up of various elements that act as the building blocks of web pages. For the purpose of styling, elements are divided into two categories: block-level elements and inline elements:
a span element is used as an inline element and a
div
element as a block level element.
The difference between the two elements is a commonly misunderstood concept of web design but it does not have to be!
Basically, an inline element does not cause a line break (start on a new line) and does not take up the full width of a page, only the space bounded by its opening and closing tag. It is usually used within other HTML elements.
# The Box Model
Each element is a box consists of 4 parts: content, padding, border and margin.
Content
Margin
Border
Padding
# Box-sizing
Defines the box model sizing behavior, by default the box sizing is content-box which means that the element's width and height only includes the "content" area and the padding, border and margin adds up to those values.
Box-sizing: Values
- content-box: Width and height will include only the content area.
- padding-box: Width and height will include the content area and the padding area.
- border-box: Width and height will include the content area, the padding area and the border area.