Web Design I Concepts

Box Model

All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout.

The CSS box model is essentially a box that wraps around every HTML element. It consists of:

Margins
Borders
Padding
Content

Margins

The margin clears a area to create space around elements, outside of any defined borders.

The margin can be altered with top, right, bottom and left sides.

Below is the margin and how it is used in CSS:

                        
                            p{
    margin: 50px 45px 10px 5px; 
}

Output:

This is my margin

As you can see, the margin of the p element inside the div element has moved the position.

Borders

CSS Borders allow you to specify the style, width and colour of an element's border.

There are many different styles you can give the border such as dotted, dashed, solid etc.

Here is how to do a simple border in CSS:

                        
                            p {
    border: 3px dotted blue;
}

This is my border

As you can see, the border is dotted and blue, and 3px thickness. There are many different things you can do with a border, you can also have your borders rounded using the border-radius attribute.

Padding

The CSS padding properties are used to generate space around an element's content, inside of any defined borders.

With CSS, you have full control over the padding. There are properties for setting the padding for each side of an element (top, right, bottom, and left), similar to Margins and Borders.

This is how you set the paddning:

                        
                            p{
    padding: 50px 20px 10px 30px;
}

This is the padding.

As you can see the padding, which is inside the border pads out the element.

Content

The content defines the content of the box, where text and images appear, or even, other elements.

You can set a width and height to elements, this contributes to the content's base size.

Disclaimer

For Margins, Padding and Borders, the thickness / width / size you can input in 1,2,3,4 ways. You can also input all attributes on the same line as well for borders, like using "2px solid black" etc.

Sources: (click on them to see them)

Box Model Concepts