Complete 2020 Web Development Bootcamp

Section 5 – Lessons 41 to 42

Lesson 41 explains the box model of website styling. It demonstrates how the margin, border, padding and height and width of the element affect the size and position of the element on the web page. Changing the size of these various properties allows you to change the location of the element on the web page.

Lesson 41 deals with various display properties. These are – “block”, “inline”, “inline-block” and “none”. These display properties also allow you to control the positioning of an element on the web page.

  • An element with the “block” display property takes up the entire width of the web page, unless the “width” is set using CSS. Two “block” elements won’t display side by side. You can set “width” and “height” on a “block” element. Some examples of “block” elements are <div>, <h1> and <p>.
  • An element with the “inline” display property only takes up the amount of space needed for that element. Two “inline” elements will display side by side. You can’t set the “width” and “height” of an “inline” element using CSS. Some examples of “inline” elements are <img>, <span> and <a>.
  • An element with the “inline-block” display property functions like an element with the “inline” display property but also allows you to set the “width” and “height” of the element using CSS like you could with an element with the “block” display property.
  • An element with the “none” display property is not visible on the web page and does not take up any space on the page.