The box model IN CSS

The box model in CSS describes the boxes which are being generated for HTML-elements. The box model also contains detailed options regarding adjusting margin, border, padding and content for each element. The diagram below shows how the box model is constructed:

The box model in CSS

 

The illustration above might seem pretty theoretical to look at, so let's try to use the model in an actual case with a headline and some text. The HTML for our example is (from the Universal Declaration 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>
 
 
Even though it may look a bit complicated, the illustration shows how each HTML-element is surrounded by boxes. Boxes which we can adjust using CSS.

Comments

Popular posts from this blog

TOP PHP freamwork

What is required for it startup company ?

add more button new row using javascript