CSS Box Model Properties with Design Example

Ad Banner Image

CSS Box Model Properties

CSS Box Model means that a group of 3 CSS Properties such as margin, padding and border. If you want box look and feel of an HTML Element than CSS Box Model is used.

CSS Box Model Examples

<!DOCTYPE html>
<html>
  <head>
    <style>
    .first
    {
        border: 10px solid lightsalmon;
        margin: 30px;
		padding: 20px;
		background-color: lightblue;
    }
	.second
	{
		background-color: darkcyan;
		border: 1px solid grey;
	}
    </style>   
  </head>
  <body>
    <div class="second">
	<div>
        <p class="first">Lorem ipsum ute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
	</div >
  </body>
</html>

The above code shows how one can create Box Model look and feel for an HTML element.

Here dark-cyan color shows the margin, light-blue color shows the padding and light-salmon color shows border.

CSS Box Model Example
Fig.1 – Box Model Example

CSS Box Model Design

In the Box Model Design width is the most important design property, because the actual element width is calculated based on margin, padding and border sizes.

CSS Box Width Example

<!DOCTYPE html><html>
  <html>
  <head>
    <style>
    .first
    {
	    width: 300px;  
		background-color: lightblue;
		margin: 0;
    }
	.second
    {
	    width: 300px;  
		background-color: lightblue;
		padding: 0 20px;
		border: 20px solid red;
		margin: 0;
	}
	.third
    {
	    width: 300px;  
		background-color: lightblue;
		padding: 0 20px;
		border: 20px solid red;
		margin: 25px;
    }
	div
	{
		background-color: orange;
		border: 1px solid white;
		display: inline-block;
	}
    </style>   
  </head>
  <body>
    <div>
       <p class="first">Lorem ipsum ute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
	</div><br />
	<div>
       <p class="second">Lorem ipsum ute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proiden.</p>
	</div><br />
	<div>
       <p class="third">Lorem ipsum ute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
	</div>
  </body>
</html>

The above code shows the CSS Box Width depends on the padding, border and margin.

CSS Box Model Design Properties
Fig.2 – Box Model Examples

The original width of the paragraph is equal to the sum of the content width, border width and margin width.

The above code’s Paragraph Width Calculation are as bellow.

Actual Width of Element = left margin + left border + left padding + width of Element + right padding + right border + right margin

Actual Width of Element For Paragraph First

Actual Width of Element = 0 + 0 + 0 + 300 + 0 + 0 + 0 = 300px

Actual Width of Element For Paragraph First

Actual Width of Element = 0 + 0 + 0 + 300 + 0 + 0 + 0 = 300px

Actual Width of Element For Paragraph Second

Actual Width of Element = 0 + 20 + 20 + 300 + 20 + 20 + 0 = 380px

Actual Width of Element For Paragraph Third

Actual Width of Element = 25 + 20 + 20 + 300 + 20 + 20 + 25 = 430px

Sponsor Banner
You can leave a response, or trackback from your own site.
Leave a Reply to the article


Learn CSS

Learning & Certifications
Follow Us
Facebook Icon   Linked In Icon   Twitter Icon  
Validation and Recognition

Valid CSS! Valid HTML5!

Powered by Wordpress