Box Model Basics

The CSS box model describes the rectangular boxes that are generated for elements in the document tree and laid out according to the visual formatting model.
Each box has a content area for text, image and optional surrounding padding, border, and margin areas; the size of each area is specified by properties.
The CSS box model is group of properties which specify the space around an element, its dimensions, its margins, its borders, and padding between the content of the element and the borders as in the figure

Box Model Basics

CSS Box Model
The diagram illustrates the different spaces around an element which consist of margin, border and padding all around the element i.e. on top, bottom, left and right.  The content is surrounded by different properties which make up the box are
  • padding is the space between the content and the content’s border. Padding is what separates a photo from the border that frames the photo.
  • border is the line that’s drawn around each edge of the box.
  • background-color fills the space inside the border, including the padding area.
  • margin is what separates one tag from another. The space that commonly appears between the tops and bottoms of paragraphs of text on a web page, is the margin.
An element is surrounded first by padding then by border and lastly by margin and is explained by another figure as
Box Model Basics 2

CSS Box Model on a web page

Go To- Certified CSS3 Developer Tutorial

Get industry recognized certification – Contact us

Menu