Box Model, Height, width & Overflow

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 every HTML element. It consists of: margins, borders, padding, and the actual content.

It can be used as a toolkit for customising the layout of different elements. The web browser renders every element as a rectangular box according to the CSS box model.

Example is given below

Explanation of Above Image:

Content – 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.

Padding – It includes the element’s padding. This area is actually the space around the content area and within the border box. Its dimensions are given by the width of the padding-box and the height of the padding-box.

Border – It is the area between the box’s padding and margin. Its dimensions are given by the width and height of border.

Margin – This area consists of space between border and margin. The dimensions of Margin area are the margin-box width and the margin-box height. It is useful to separate the element from its neighbors.

See the Pen CSS-BoxModel by Ankit (@AnkitPathshalaCoding) on CodePen.

To group selectors, separate each selector with a comma.

Width and Height

In order to set the width and height of an element correctly in all browsers, you need to know how the box model works.

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 padding, borders and margins

Example is given below

See the Pen CSS-width&Height by Ankit (@AnkitPathshalaCoding) on CodePen.

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

Overflow

The overflow property specifies whether to clip the content or to add scrollbars when the content of an element is too big to fit in the specified area.

The overflow property has the 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

Note: The overflow property only works for block elements with a specified height.

Note: In OS X Lion (on Mac), scrollbars are hidden by default and only shown when being used (even though “overflow:scroll” is set).

See the Pen CSS:Overflow by Ankit (@AnkitPathshalaCoding) on CodePen.

Exercise 7.1

The boxer model

Add borders
This webpage displays a gallery of photos of boxer dogs. In this first step, add a border to all of the photos. Try and make it look like a photo frame, if you can. Challenge: The boxer model
Report a problem
Add borders
This webpage displays a gallery of photos of boxer dogs. In this first step, add a border to all of the photos. Try and make it look like a photo frame, if you can.

Exercise 7.2

Resize the div
This webpage describes the ocean, with an image and a few paragraphs which are inside a <div>.

In this first step, style the <div> that has a class of ‘info’, so that it takes up 70% of the width and is 200px tall.