Box model

All elements in an HTML document can be styled in a variety of ways by using CSS. In HTML, each element is considered as a box , whether it is h1, p, an image, or so on. So all elements in HTML documents have a margin, border, padding and its own dimensions. The CSS Box model deals with the area that surrounds each elements and how it can be formatted.

The Box model determines how elements are positioned within the browser window. With the Box Model, a developer can control the dimensions, margins, padding, and borders of an HTML element. The content of an element immediately surrounded by the padding area and the border is drawn just outside the element`s padding area and the margin is surrounds the element`s border.

CSS box model

CSS padding border margin

You can control individually the padding, border, margin and dimensions on each side of a box using CSS. The next few sections cover these box properties in more detail.

Padding Properties

Padding is the area between the inside edge of the border and the outer edge of the content. Padding property allows us to specify how much distance to keep bewteen the content of an element and its border. We can set this property in pixels and in percentage values.

h1 {padding:10px;}

You can individually change the padding of each sides of a box use the following properties:

padding-top padding-right padding-bottom padding-left

Border Properties

Borders draw a line between the margin and padding of each sides of the box. There are three properties of a border which we can change. They are Border Width, Border Color and Broder Style.The following sections examine how each of the respective CSS properties can be used to affect borders.

Border Width (border-width)

The border-width property allows us to specify the width of the border area surrounded by the padding area of the box. We can specify the width in absolutes or relative units.

h1 { border-width: 5px;}

We can individually control the border width in each sides of the box using the following properties:

border-top-width border-right-width border-bottom-width border-left-width

Border Color ( border-color)

The border color property indicate which color a border should be. You can specify Color keywords , Color hexadecimal values and Color decimal or percentage values to specify colors in the border color properties.

p {border-color:#ff0000;}

We can individually control the border color in each sides of the box to use the following properties:

border-top-color border-right-color border-bottom-color border-left-color

Border Style (border-style)

The Border Style property to specify the line style of the border. There are ten different types of predefined border styles we can specify a box model..

p {border-style:dotted;}

The following table shows the different types of border style.

CSS border style

We can individually control the bottom, right, top, and left borders style of a box using the following properties:

border-bottom-style border-right-style border-top-style border-left-style

Margin Properties

The margin property controls the gap between the box and the other elements in the document.

p { margin:20px; }

We can individually control the bottom, right, top, and left margin of a box using the following properties:

margin-bottom margin-top margin-left margin-right

Margin Collapsing

Margin collapsing occurs when the top margin of an element comes into contact with the bottom margin of another element, then only the element with the bigger margin will show.

Dimensions of a Box

Dimension properties allows us to set the height and width for element boxes. Dimension takes values as length, percentage or the keyword auto.

body { width: 620px; height: 100px; }

By default dimesions have auto value. When we do not specify any value as dimensions, it will take value as auto.

There are some other properties also can set as dimensions.

min-width : Sets the minimum width for a box min-height : Sets the minimum height for a box
max-width : Sets the maximum width for a box max-height : Sets the maximum height for a box
line-height : Sets space between lines of text

Line height example:

CSS line height

Overflow Property

Overflow happend when the content of the box overflow the boundaries of those dimensional constraints. We can control it by setting overflow properties such as visible, hidden, scroll and auto . If there is a situation when the content is more than the space available, we use hidden or scroll properties. The hidden property hide the excess content and scroll property sets a scrollbar, so that we can access the excess content by scolling the box content.

p { overflow: hidden;}

Hidden and Scroll example:

CSS overflow

We can control the overflow by horizondally ( overflow-x ) and vertically ( overflow-y).