CSS Tutorial 9: The box model

The box model in CSS describes the bins that are being generated for HTML-elements. The box mannequin also involves exact choices regarding adjusting margin, border, padding and content for every aspect. The diagram below indicates how the box mannequin is constructed:

CSS Tutorial 9: The box model

The box model in CSS


The illustration above could look beautiful theoretical to seem at, so let’s attempt to use the model in an exact case with a headline and some textual content. The HTML for our illustration is (from the universal announcement of Human Rights):

	<h1>Article 1:</h1>

	<p>All human beings are born free
	and equal in dignity and rights.
	They are endowed with reason and conscience
	and should act towards one another in a
	spirit of brotherhood</p>

Through including some colour and font-know-how the example might be awarded as follows:


The illustration involves two elements: <h1> and <p>. The box model for the two elements may also be illustrated as follows:


Even though it is going to seem slightly intricate, the illustration shows how every HTML-detail is surrounded through bins. Packing containers which we can regulate utilizing CSS.

The residences which keep an eye on the special bins are: padding, margin and border. The next two lessons take care of exactly these three properties:

 Lesson 10: The field model – margin & padding
Lesson 11: The box mannequin – border
if you have finished these two lessons, you will master the field mannequin and be able to layout your documents so much finer and more designated than within the old fashion using tables in HTML.


On this lesson you’ve got been introduced to the box mannequin. Within the following three lesson we will take a more in-depth look at how to create and manage elements within the field model.