In this lesson we learn about the CSS Box Model, Margins, Borders and Padding.
Everything in a web page has a box around it. These boxes are mostly invisible but they control how everything is arranged and laid out on the page. We call this the CSS Box Model.
Each box has:
Let's take a look at CSS Borders first. Here are some examples of
<div></div> elements that have different borders applied to them using CSS.
border-style CSS property sets the style of border to use on the box. The following values can be set for
border-width CSS property sets how wide (usually in pixels) the border is.
We can also set different widths for each of the top, right, bottom and left borders by providing 4 values for the
border-width CSS property in the following order:
border-color CSS property sets the colour of the border. The values we can use to set the colour can be: