The Box Model

How are elements displayed

Before jumping into the box model, it helps to understand how elements are displayed. The difference between block-level and inline-level elements is covered. Let's recap.

  • block-level elements occupy any available width, regardless of their content, and begin on a new line.

  • Inline-level elements occupy only the width their content requires and line up on the same line, one after the other.

  • Block-level elements are generally used for larger pieces of content, such as headings and structural elements. Inline-level elements are generally used for smaller pieces of content, such as a few words selected to be bold or italicized.

Display

Exactly how elements are displayed—as block-level elements, inline elements, or something else—is determined by the display property. Every element has a default display property value; however, as with all other property values, that value may be overwritten. There are quite a few values for the display property, but the most common are block, inline, inline-block, and none.

We can change an element’s display property value by selecting that element within CSS and declaring a new display property value. A value of block will make that element a block-level element.

p {  display: block;}

A value of inline will make that element an inline-level element.

p {
  display: inline;
}

Things get interesting with the inline-block value. Using this value will allow an element to behave as a block-level element, accepting all box model properties (which we’ll cover soon). However, the element will be displayed in line with other elements, and it will not begin on a new line by default.

p {
  display: inline-block;
}

The Space Between Inline-Block Elements

with inline-block elements is that they are not always touching, or displayed directly against one another. Usually a small space will exist between two inline-block elements. This space is normal.

using a value of none will completely hide an element and render the page as if that element doesn’t exist. Any elements nested within this element will also be hidden.

div {
  display: none;
}

Knowing how elements are displayed and how to change their display is fairly important, as the display of an element has implications on how the box model is rendered.

What Is the Box Model?

For customizing the layouts of different elements in the web page,so that the page appear's good and is visually appealing for the user , we make use of CSS box model.

The View Port In the Web page basically consists of many divisions these divisions are called as Margin area,Padding area ,Border area and Content area.

According to the box model concept, every element on a page is a rectangular box and may have width, height, padding, borders, and margins.

Box-Model has multiple properties in CSS such as:

  • borders

  • margins

  • padding

  • Content

When laying out a document , the browser's render the elements in the form a RECTANGULAR BOX as specified by the CSS box model

so CSS can be used to customise the layout of our web page according to our requirements using the above mentioned properties of CSS box model.

Every box is composed of four areas, defined by their respective edges,the content edge, padding edge, border edge, and margin edge.

Let us explore these properties of CSS box model individually

Margin Area

The CSS Margin property is used to provide space around elements especially Outside the borders.

In CSS Individually we can specify the Margin property according to the requirements.To specify margin on each side of an element we use

  • margin-top

  • margin-right

  • margin-bottom

  • margin-left

In CSS we can style this as:

  • margin-top:10px; By this above code the top margin of the element is set to 10px.

  • margin-right:10px; By this above code the right margin of the element is set to 10px.

  • margin-left:10px; By this above code the left margin of the element is set to 10px.

  • margin-bottom:10px; By this above code the bottom margin of the element is set to 10px.

margin is a shorthand property used in CSS

  • margin : 10px; (here in the above line all sides of element is set to 10px).

  • margin : 10px 20px 30px 40px; (here in the above line the top margin is set to 10px, right margin is set to 20px , bottom margin is set to 30px and lef margin is set to 40px).

  • margin : 10px 20px; (here in the above line the top margin is set to 10px and bottom margin is set to 10px and left and right margin is set to 20 px). By default the margin will be set to approx of 8px in most browser's to nullify this we can give margin as 0px. we can also use Negative Values too. At times when two or more elements come across each other either one below other or beside other

  • top and bottom margin's collapses to single margin that is equal to largest of the two margin elements.

  • This does not happen on left and right margins

Only top and bottom margins are affected when margin collapsing occur's

Properties controlling the margins of a box are

  • margin

  • margin-right

  • margin-bottom

  • margin-top

  • margin-left

Padding Area

The CSS Padding property is used to provide space around the content of the element , especially Indise the borders. In CSS individually we can specify the Padding property according to the requirements.To specify padding on each side of an element use:

  • padding-top

  • padding-right

  • padding-bottom

  • padding-left

In CSS we can style this as:

  • padding-top:10px; By this above code the top padding of the element is set to 10px.

  • padding-right:10px; By this above code the right padding of the element is set to 10px.

  • padding-left:10px; By this above code the left padding of the element is set to 10px.

  • padding-bottom:10px; By this above code the bottom padding of the element is set to 10px.

padding is a shorthand property used in CSS

  • padding : 10px (here in the above line all sides of padding is set to 10px).

  • padding : 10px 20px 30px 40px; (here in the above line the top padding is set to 10px, right padding is set to 20px , bottom padding is set to 30px and lef padding is set to 40px).

  • padding : 10px 20px; (here in the above line the top padding is set to 10px and bottom padding is set to 10px and left and right padding is set to 20 px). We can even individually provide styling to one of the sides either top or right or left or bottom depending on your requirement. Ooops we can't use Negative Values to CSS padding property like we could in Margin CSS property

Properties controlling the Padding of a box are

  • padding

  • padding-left

  • padding-top

  • padding-bottom

  • padding-right

Content Area

This area consists of content like text, image, or other media content. It is bounded by the content edge and its dimensions are given by content box width and height. The height and width properties are used to set the height and width of an element. - The CSS overflow property controls what happens to content that is too big to fit into an area.

div{
width:20px;
height:30px;
}
CSSCopy

in this above code the the div element is set to a width of 20px and height of a 30px. The Overflow property can take following values

  • visible - Default. The overflow is not clipped. The content renders outside the element's box.

  • hidden - The overflow is clipped, and the rest of the content will be invisible.

  • scroll - The overflow is clipped, and a scrollbar is added to see the rest of the content.

  • auto - Similar to scroll, but it adds scrollbars only when necessary

To have flexibility with the content on left or right edge and on top and bottom contentswe css provides overflow-x and overflow-y

  • overflow-x - Specifies what to do with the left/right edges of the content if it overflows the element's content area.

  • overflow-y - Specifies what to do with the top/bottom edges of the content if it overflows the element's content area.

Properties controlling the size of a box are:

  • height

  • width

  • max-height

  • max-width

  • min-height

  • min-width

Properties controlling the flow of content in a box are:

  • overflow

  • overflow-x

  • overflow-y

Border area

CSS border property allows us to style the border according to our requirement depending on our requirement we can define border on any one of the side or we can have borders on all side.

CSS border Styles

border-style property specifies what kind of border to display. eg: solid, dotted, dashed, double, groove, ridge, inset, outset, hidden, none.

div{
border-style: solid;
}
CSSCopy

CSS Width Styles

border-width property specifies the width of the four borders. 

div{
border-style: solid;
  border-width: 5px;
}
CSSCopy

CSS border Color Styles

border-color property is used to set the color of the four borders. 

div{
border-style: solid;
border-color: red;
}
CSSCopy

CSS border Sides Styles

properties for specifying each of the borders (top, right, bottom, and left) 

div {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}
CSSCopy

Its hectic writing so many codes .... we have short hand property.

div {
border: 5px solid red;
}
CSSCopy

CSS rounded border Styles

border-radius property is used to add rounded borders to an element 

div {
  border: 2px solid red;
  border-radius: 5px;
}
CSSCopy

Sample of CSS BOX MODEL

CODE snippet

div {
background-color: lightgrey;
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;    
}

The text is the content of the box. A 50px padding, 20px margin and a 15px green was added border.

PreviousThe Cascade & Global ScopeNextLists

Last updated