Day 4: Box Model & Display
CSS Box Model
Every HTML element can be considered a box that uses the CSS box model for its visual display. Each element has content, padding around the content, a border around the padding, and a margin between other elements. We are able to set padding and margin on the top, right, bottom, and left of the element. Using these properties allows us to position elements the way we want to.
Shorthand Notation
We can write out every padding/margin rules line by line, or we can specify all of the rules in one line using a shorthand notation. The order of the values is Top, Right, Bottom, Left which can be remembered as TRouBLe! We can also shorten it even more and only put two values which will be evaluated as Top/Bottom then Right/Left. We can also use shorthand notation for the border values.
Display
The display property controls how elements flow together on a page. An elements display can be set to block, inline-block, inline, or none. Block-level elements start on their own row and will take up all available width of the container. Inline elements will wrap onto the next line and only take up the width and height needed to fit the content. Inline block elements allow us to define sizing properties in our CSS and they will only take up the width they need by default.
Closing
We are starting to learn how to position our elements on the page, this will enable us to create nicer-looking websites. Tomorrow we will be learning BEM and how we should be naming our HTML elements to apply styles. Until then ✌.️
