Box Model

Display Type

There are many display types, we are going to focus on 2 for this section.

Block

p {
    display: block;
}

Inline

p {
    display: inline;
}

Padding

We can define padding explicitly for each side

p {
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
}

Or we can use short hand. If we want to define 4 different sides in one line, we give it for numbers. Starting at the top and going clockwise (top, right, bottom, left).

p {
    padding: 20px, 30px, 40px, 50px;
}

If we want both sides to be the same but the top and bottom to be different, we give it 3 numbers (top, right/left, bottom)

p {
    padding: 20px, 30px, 40px;
}

If we want to the top and bottom to be the same, and we want left and right to be the same, we can give it 2 numbers(top/bottom, left/right)

p {
    padding: 20px, 30px;
}

If we want all the sides to be the same, we just give it 1 number.

p {
    padding: 20px;
}

Border

We can define individual aspects of the border

.box {
    border-width: 1px;
    border-style: solid;
    border-color: #223;
}

We can also define each side and all attributes

.box {
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #223;

    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: #223;

    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #223;

    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: #223;
}

There is also a short hand, which is more commonly used. Instead of defining width, style, and color in different lines, we define them in the same line, in the same order

.box {
    border: 1px solid #223;
}

And if we wanted to style sides differently, we could do it with short hand

.box {
    border-top: 1px solid #223;
    border-right: 1px solid #223;
    border-bottom: 1px solid #223;
    border-left: 1px solid #223;
}

Margin

Margin is styled the exact same way as padding

p {
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 20px;
    margin-right: 20px;
}

And all the shorthand works the same way as well

p {
    margin: 20px;
}