Every web page element is contained in a box with the
• The core content
• Padding around the Content
• Border around padding to delineate the visible area.
• Margin around the border that separates it from other
Calculating Content Width
Total content width is calculated as follows:
Width of content + right-padding + left-padding +
right-border + left-border
10 px 10 px
20 px Width = 200px 20 px
200+20+20+10+10 = 280 px
Two types of boxes:
Block: Generated by HTML like P, DIV,
Header tags, etc.
Inline: Generated by actual content (images
and text), and inline elements like the
<strong> and <em> tags.
Block boxes can contain other boxes within
<div id=quot;boxquot;> Inline Block
First line of text
<p>Paragraph of text</p>
• Normal browser behaviour.
• Everything defaults to the left unless otherwise
• Block boxes ﬂow vertically from top to bottom
in their containing blocks.
• Inline boxes ﬂow left to right.
• Vertical margins are collapsed.
• Introduced to enable positioning of elements to
left or right, and have content ﬂowing around
• Now used to position boxes for layout
• Top of the ﬂoated box is aligned with the top of
the inline text so other content ﬂows around it.
• All ﬂoated boxes should have a width deﬁned.
• Vertical margins of a ﬂoated box are not
• The quot;clearquot; property is used to push down
content that follows a ﬂoated box.
• Can take the following values: left, right, both