CSS box model – the basics for newbies

CSS box model – the basics for newbies

Designing a webpage in HTML and CSS is not quite a tough job if you know all the nooks and corners of it. Well, IE always a plays a villain’s part from a web designer’s point of view. But, there are yet some other aspects that the web master must be very careful about. One such important aspect is the CSS box model. This concerns the border, margin and padding of elements. If you are not so pro with the web designing tactics and strategies yet, then you must go through this CSS tutorial very thoroughly. Every designer has faced at least one problem of the box model in his or her coding life.

The CSS box model also inherits from the previous versions, so learning this would not harm your CSS3 knowledge at all. First of all, the idea about the box model must be very clear. What we are dealing with here is nothing related to the width or height of a particular element. Those are absolutely separate values and attributes. The box model describes the uniqueness between the attributes border, margin and padding and their exact meaning. All the three attributes are useful at some point of time and play a vital role in the design layouts.

The border is the attribute that sets a particular value for the element’s outline. This value has a style, a colour and also a weight. Styles include – solid, dashed, etc. and the weight is the width of the outline.

Margin is one of the most vital and interesting aspects of the css box model. This attribute gives the distance between the outline of an element and the outline of its immediate parent container or sibling. So, when a particular margin is set with a certain value, it means that this value of space would be left out outside the element’s outline.

Padding is the most crucial and interesting of all the three of these attributes. This attribute proves to be the trickiest of all in the css box model tutorial. Padding gives the value or distance that is left out inside a particular element from its outline. This ensures that the element content (text, image or an inner child element) is moved away inside from the element’s outline or border.

Let us have a look at the pictorial representation of the css box-model –

 

 

css box model tutorial - a 100 web solutions

So, if we consider an example structure where we embed an image element inside a parent div, assigning all three attributes – border, margin and padding to the image element; how will our css box model representation look?

 

Let’s monitor the CSS box model with an example

 

css box model tutorial - a 100 web solutions

 

 

So, here the parent div element (the green coloured outline) contains the image element. The main picture appears at the centre. Then there is a gap between the picture and the thick ash outline. This gap is the padding of the image element. The thick ash outline is the border for the image element. After the ash outline, there is another gap. This is the margin of the image element.

So, that’s all. It was as simple as that. Start designing now !

 

 Don’t forget to share if you have liked my article

Comments are closed.