Course Content
CSS Fundamentals
CSS Fundamentals
Box Model
HTML elements are rendered as rectangular boxes on a web page. Each element has its content area, padding, border, and margin.

- The content area is the space where the actual content of the element resides. Its width depends on the element type (block-level or inline - we will consider the difference between them and their specificity to work with further in the course). Its height depends on the content itself.
- The padding is the area between the content and the border, which can be used to add space between the content and the border.
- The border surrounds the element. By default, the border width is
0
. Also, if we do not specify the border color, the border takes the color of the content. - The margin is the space between the border and other elements on the page.
index.html
index.css
index.js
Note
By default, some elements have predetermined
padding
andmargin
properties. It was made to ensure that a web page will be readable even without any styles.
width and height properties
width
and height
properties are used to define the size of an element. The width and height of an element can be different depending on the type of box model.
index.html
index.css
index.js
Also, it is important to mention that most elements are enough to have only the width
property while height
will be determined automatically. This way, we avoid the overflow problem when the content width
or height
is less than the content inside.
What type of elements exist in HTML?
Select a few correct answers
Everything was clear?