Subscribe
Tutorial search

Cascading Style Sheets box model - CSS tutorial

This tutorial explains the CSS box model and how the elements are positioned within those boxes
Category: CSS tutorials - Difficulty:




This model describes the boxes which are being generated for HTML elements. It contains specified preferences for adjusting margins, borders, padding and content of each element.

The box model is constructed in a certain feature. Imagine a rectangle and then put three smaller rectangles inside it with each rectangle drawn at the center of a rectangle before it. The smallest rectangle in the middle is for the content of the document. The rectangle next to the box for content is for the padding. After the rectangle for padding is the rectangle for border and the last is the box for the margin, which is the largest rectangle.

Each HTML element is surrounded by a box. No matter how complicated it might sound, it’s the basic logic behind an HTML document.

CSS Margin

The margin property specifies the space around elements. Margin has four sides: right, left, top and bottom and margin sets the distance from each side. There is also an option to change all of the margins all at once, and this is with the use of the shorthand margin property.

body {
margin-top: 100px;
margin-right: 40px;
margin-bottom: 10px;
margin-left: 70px;
}

This code translates to a margin of 100px on the top, 40px on the right, 10pn on the bottom and 70px on the left.

The shorthand margin code for this is:

body {
margin: 100px 40px 10px 70px;
}

Now, if you want to set the margins in the same way on most of your elements, you can use this code:

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

CSS Padding

This property specifies the space between the element border and the element content. This property does not allow negative values. Unlike the property margin, padding does not affect the distance of elements from each other. Padding only specifies the distance between borders and element contents. The property padding also has shorthand to control multiple sides all at the same time.

Properties of Padding

  • padding - this is the shorthand property used to set all padding properties in one command.
  • padding-bottom - property for setting the bottom padding of an element.
  • padding-left - property that sets the left padding of an element.
  • padding-right - property that sets the right padding of an element.
  • padding-top - property that sets the top padding of an element.

Instead by just typing this command...

h1 {
background: yellow;
}

h2 {
background: orange;
}

... with the property padding, you can change the amount of filling you desire for a particular text like this:

h1 {
background: yellow;
padding: 20px 20px 20px 80px;
}

h2 {
background: orange;
padding-left:120px;
}

It is the end of another lesson. However, there are still much to learn in the next few lessons. Like the lesson after this will discuss about setting borders in different colors and shaping your elements.