Can you explain CSS box model?

CSS box model is a rectangular space around a HTML element which defines border, padding and margin.

Border: – This defines the maximum area in which the element will be contained. We can make the border visible, invisible, define height and width etc.

Padding: – This defines the spacing between border and element.

Margin: – This defines the spacing between border and any neighboring elements.

For instance below is a simple CSS code which defines a box with border , padding and margin values.

.box {
    width: 200px;
    border: 10px solid #99c;
    padding: 20px;
    margin: 50px;
}

Now if we apply the above CSS to a DIV tag as shown in the below code , your output would be as shown in the figure below. I have created two test “Some text” and “Some other text” so that we can see how margin property functions.

Some text
</div>

Some other text

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s