Structure, Phrasing and Display
The difference between structural elements and phrasing elements is that block elements tend to make up bigger structural pieces than inline elements.
Inline elements are used for small phrasing pieces of content within block elements. As for display properties in CSS, the display property
overrides any display value and helps customize how elements are displayed on a page.
Box Model
The CSS Box Model is a great visualization of the hierarchy of the layout in a web page. The model below is essentially how the box is structured.
By default, padding and border properties can expand the element beyond its width. Using the "box-sizing" property, it will include padding & border,
which is usually easier for layouts.
Background Images
When using background images in CSS, we have to make sure that we use the correct tag. If the image is solely for decoration or style to the page, use
the "background-image" property. If the image is important to the content of the page, use the "img" tag in HTML.
When using background images, we can use properties such as "background-size", "background-repeat" and "background-position" to help
customize how the image looks on the page. Oh, and make sure the text is still readable!