Back to Freecodecamp

The Box Model Lesson F

curriculum/challenges/english/blocks/top-the-box-model/64a66c917a7d00f97013ed0d.md

latest833 B
Original Source

--description--

The first important concept that you need to understand to be successful in CSS is the box model. It isn’t complicated, but skipping over it now will cause you much frustration down the line.

Every single thing on a webpage is a rectangular box. These boxes can have other boxes in them and can sit alongside one another. You can get a rough idea of how this works by sticking a border on every item on the page like this:

css
* {
  border: 1px solid red;
}

--assignment--

Add a border to every element on the page and see how the boxes are laid out.

--questions--

--text--

What is the fundamental concept in CSS that helps you understand the structure of elements as rectangular boxes?

--answers--

Box-sizing


Box-shadow


Box model


Border-box

--video-solution--

3