CSS Box Model

The CSS box model is used to show the layout elements on a page. The box model includes the content, padding, border, and margin.

The content is the actual content within an elements, where text and images are. The padding is the area around the content, the border is the area around the content and padding and the margin is the area around the border.

Example model:

CSS Width and Height Properties:

width/height : auto; the default value, the browser determines the width.
width/height : inherit; the width value is inherited from the parent element.
width/height : 900px; defines the width using pixels;
width/height : 50%; defines the width by percent of the parent element.

CSS Padding

The padding property determines the space between the border and the content.

You can specify padding each side like this:

padding: 25px 10px 5px 0px;

The order is always top, right, bottom, left. Or you can do it individually like this:

padding-top:25px;
padding-right:10px;
padding-bottom:5px;
padding-left:0px;

You can also define the top / bottom and left / right padding like this:

padding: 25px 50px;

Which would also look like this:

padding-top:25px;
padding-right:50px;
padding-bottom:25px;
padding-left:50px;

CSS Borders

The CSS border properties defines the appearance of the border around an element in most cases it is not visible by default.

Some CSS border properties include:

border-width:25px;
border-style:solid;
border-color:green;

Examples of border-style values:

Shorthand code can also be written like so:

CSS Margins

The margin property is the space around the border and is written just like padding and borders.

Example:

margin: 25px 10px 5px 0px;

Or like this:

margin-top: 25px;
margin-right: 10px;
margin-bottom: 5px;
margin-left: 0px;

You get the idea. All of these are styled pretty much the same.