Scribd
Upload
175 views

CSS Box Model

The CSS box model describes the layout of elements as boxes that may have properties like borders, margins, padding, and dimensions. It consists of the content, padding, border, and margin areas. The total width and height of an element is calculated by adding all of these areas together. Browsers like Internet Explorer 8 and earlier did not account for padding and borders in the width, which could cause layout issues, but adding a doctype fixes this.

Uploaded by

Rajesh Gupta
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
175 views

CSS Box Model

The CSS box model describes the layout of elements as boxes that may have properties like borders, margins, padding, and dimensions. It consists of the content, padding, border, and margin areas. The total width and height of an element is calculated by adding all of these areas together. Browsers like Internet Explorer 8 and earlier did not account for padding and borders in the width, which could cause layout issues, but adding a doctype fixes this.

Uploaded by

Rajesh Gupta
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

2/14/14

HOME

CSS Box Model

HTML

CSS

JAVASCRIPT

JQUERY

XML

ASP.NET

PHP

SQL

MORE...

REFERENCES

EXAMPLES

FORUM

Search w3schools.com

CSS Basic
CSS HOME
CSS Introduction
CSS Syntax
CSS Id & Class
CSS How To
CSS Backgrounds

WEB HOSTING

CSS Box Model

Best Web Hostin

UK Reseller Host

CSS Text
CSS Fonts
CSS Links
CSS Lists
CSS Tables

CSS Box Model


CSS Box Model
CSS Border
CSS Outline
CSS Margin

Developers Love

Previous

Next Chapter

The CSS Box Model


All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout.
The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding,
and the actual content.

WEB BUILDING

XML Editor - Free T

FREE Website BUIL

FREE Website C re

SHARE THIS PA

The box model allows us to place a border around elements and space elements in relation to other elements.
The image below illustrates the box model:

CSS Padding

CSS Advanced
CSS Grouping/Nesting
CSS Dimension
CSS Display
CSS Positioning
CSS Floating
CSS Align
CSS Pseudo-class
CSS Pseudo-element
CSS Navigation Bar
CSS Image Gallery
CSS Image Opacity
CSS Image Sprites
CSS Media Types
CSS Attr Selectors

CSS3 Tutorial
CSS3 Introduction
CSS3 Borders
CSS3 Backgrounds
CSS3 Gradients
CSS3 Text Effects
CSS3 Fonts
CSS3 2D Transforms
CSS3 3D Transforms
CSS3 Transitions
CSS3 Animations
CSS3 Multiple Columns

Explanation of the different parts:


Margin - Clears an area around the border. The margin does not have a background color, it is completely
transparent
Border - A border that goes around the padding and content. The border is inherited from the color property of the
box
Padding - Clears an area around the content. The padding is affected by the background color of the box
Content - The content of the box, where text and images appear
In order to set the width and height of an element correctly in all browsers, you need to know how the box model works.

Width and Height of an Element


Important: When you set the width and height properties of an element with CSS, you just set the width and
height of the content area. To calculate the full size of an element, you must also add the padding, borders and
margins.

CSS3 User Interface


CSS Summary

CSS Examples
CSS Examples
CSS Quiz
CSS Certificate

CSS References
CSS Reference
CSS Selectors
CSS Reference Aural
CSS Web Safe Fonts
CSS Units
CSS Colors
CSS Color Values
CSS Color Names
CSS Color HEX

The total width of the element in the example below is 300px:

width:250px;
padding:10px;
border:5px solid gray;
margin:10px;

WEB RESOURC

Web Statistics

Web Validation

Let's do the math:


250px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 20px (left + right margin)
= 300px
Assume that you had only 250px of space. Let's make an element with a total width of 250px:

Example
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;

file:///E:/Document/w3schools-2014/css/css_boxmodel.html

1/2

2/14/14

CSS Box Model


Try it yourself

The total width of an element should be calculated like this:


Total element width = width + left padding + right padding + left border + right border + left margin + right margin
The total height of an element should be calculated like this:
Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

Browsers Compatibility Issue


IE8 and earlier versions of IE, included padding and border in the width property.
To fix this problem, add a <!DOCTYPE html> to the HTML page.

Previous

Next Chapter

Top 10 Tutorials

Top 10 References

Top 10 Examples

Web Certificates

Color Picker

colorpicker

HTML Tutorial
HTML5 Tutorial
C SS Tutorial
C SS3 Tutorial
JavaScript Tutorial
jQuery Tutorial
SQL Tutorial
PHP Tutorial
ASP.NET Tutorial
XML Tutorial

HTML/HTML5 Reference
C SS 1,2,3 Reference
C SS 3 Browser Support
JavaScript
HTML DOM
XML DOM
PHP Reference
jQuery Reference
ASP.NET Reference
HTML C olors

HTML Examples
C SS Examples
XML Examples
JavaScript Examples
HTML DOM Examples
jQuery Examples
XML DOM Examples
AJAX Examples
ASP Examples
SVG Examples

R EPO R T ER R O R

HO ME |

TO P

HTML C ertificate
HTML5 C ertificate
C SS C ertificate
JavaScript C ertificate
jQuery C ertificate
XML C ertificate
ASP C ertificate
PHP C ertificate

PR INT

FO R UM

ABO UT

ADVER TISE W ITH US

W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading and basic understanding. Tutorials, references, and examples
are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using this site, you agree to have read and accepted our terms of use,
cookie and privacy policy. C opyright 1999-2014 by Refsnes Data. All Rights Reserved.

file:///E:/Document/w3schools-2014/css/css_boxmodel.html

2/2

You might also like