Structure, Phrasing and Display
Block and inline elements differ in their default margin and the amount of space they take up. By default, block elements have a small top and bottom margin, will always start on a new line, and always expand to fill all of the available horizontal space. Inline elements, by default, have no margins, do not start on a new line, and only take up as much space as their child elements.
Block and inline are two of the many possible values for the display css property. Grid, table, and flex are all display methods that can be used to create grid and/or responsive layouts. Some display settings cause an element to mimic another element, such as with display: list-item; which lets the element behave like a li element. An element can also inherit the display property from its parent element with display: inherit; or be completely hidden with display: none; .
Box Model
The CSS box model is the basic structure for every HTML element which includes the content, padding, border, and margin. These properties are layered like an onion. The content is surrounded by a border. Padding is empty space between the edge of the content and the inside edge of the border, which can be used to give content more room to breathe. Margin is empty space between the outer edge of the border and surrounding content, which creates space between other elements or the edge of the page.
By default, when the size of an element is calculated, the padding and border are added to the width and height, resulting in the actual dimensions being larger than you have set with the width and height properties. With box-sizing: border-box; padding and border become included in the width and height, which makes designing a site much more intuitive.
Background Images
img is used to include images in a site that are either part of the content, have an important semantic meaning, and/or should be included when the page is printed. The CSS property background-image should be used to include non-semantic, decorative images that are not part of the content and will not be included by default when users print the page.