Box Model Example

This box has no margins, no border and no padding. Poor box.

Box 2: this box has 50 px of padding, no border and no margins.

Box3: this box has 50 px of padding, a single line border and no margins.

Box4: this box has 50px of padding, a single line border and 75 px margins.

Box5: Playing with borders

This box has 25 pixels of padding at the top; 100 pixels at the bottom; 150 pixels on the left side and 50 pixles on the right side.

Now we have all differnt margins all around but still no padding! Let's type some more around so we can see how this really works. If there was no padding, there would be not white space around. In this case we have the background-color of the paragraph set to white so it really is white space. The background color of the body is the same blue of mscoding.club.

Number	Entire Super Long Full Name
1	Entire Super Long Full Name	Mary Margaret	Doe
2	John	Jackson-Strider

Types of borders

I have a solid border

I have a dotted border

I have a dashed border

I have a double border

I have a grooved border

I have a ridge border

I have a inset border

I have a outset border