HTML Cascading Style Sheets Box Model

In HTML, although you can not neccesarily see it, every element is considered to be surrounded by a "box". If you think of the content of the HTML as the interior of the box, you can visualize it as surrounded by successive layers of the box. These layers are margins, borders, padding, and the actual content is inside.

Here is an example of a class setting the box elements:

		
			.myBox {
			    width: 300px;
			    padding: 15px;
			    border: 2px solid gray;
			    margin: 2;
			}
		
	

Determining the Size of your Box

	
		300px (width)
		+ 30px (left + right padding)
		+ 4px (left + right border)
		+ 4px (left + right margin)
		= 338px
	

Additional Resources

• CSS Box Model W3C schools
• The Box model for beginners
• The CSS Box Model; CSS Tricks
• Good Illustration of the Box Model