CSS

The CSS model box

Everything in CSS has a box around it, and understanding these boxes is key to being able to create layouts with CSS, or to align items with other items.
The CSS box is a set of rules that defines how every element in a web page is rendered. The CSS bow says that every element on a webpage is a rectangular box.
The box model has five main parts/properties that determine the size of the box. Those properties are the width, the height, the padding, the border, and the margin.

CSS box

Content

The content is in the middle, surrounded by optional elements such as padding, border, and margin.

HTML

<p>Text</p>

CSS

p { 
background: lightblue;
}
Example 2.2.1

Text

Visual example of 2.2.1

The blue field are the size of the content box

Height & width

The content is the core.
Hight is rarely set for element, but by default is the height of the content used.
Width is the size of the element.

HTML

<p>Text</p>

CSS

p { 
background: lightblue;
height:100px;
width:100px;
}
Example 2.2.2

Text

Visual example of 2.2.2

These properties adjust themselves automatically based on the size of the content, unless we define them.

Padding

Padding is the field between the content and the borders of the element. Padding will move the element inside its box.

HTML

<p>Text</p>

CSS

p { 
background: lightblue;
height:100px;
width:100px;
padding:20px
}
Example 2.2.3

Text

Visual example of 2.2.3

When you change padding with one number, will the padding be same around the element, but you can also have passing on one site only.

p { 
background: lightblue;
height:100px;
width:100px;
padding:20px 10px 5px; 6px;
}
Example 2.2.4

Padding begins in the top site of the screen, then left, bottom and right.

Border & outline

A border is a line around the element. By default is it not set.

HTML

<p>Text</p>

CSS

p { 
background: lightblue;
height:100px;
width:100px;
padding:20px;
border:1px solid red;
}
Example 2.2.5

Text

Visual example of 2.2.5

When you are making a border can you set the size of it, which type the border should have (it could be dotted, solid ect.) and which color.

Margin

Margin is extra space around the content element. You can use it to seperate different boxes from each other.

HTML

<p>Text</p>
<p>Text</p>
<p>Text</p>

CSS

p { 
background: lightblue;
height:100px;
width:100px;
padding:20px;
border:1px solid red;
margin-bottom:50px;
}
Example 2.2.6

Text

Text

Text

Visual example of 2.2.6

Here they are without margin

Text

Text

Text

Visual example of 2.2.7