Scribd
Upload
34 views

Cascading Style Sheets (CSS) Box Model: TGI Web Design & Development

The document discusses the CSS box model and how to correctly calculate element widths and heights. It explains the different parts of the box model - margin, border, padding, content - and how they affect sizing. It emphasizes that the width and height properties only control the content area, so padding, border and margin must be added to get the full element size. A formula is provided to calculate total element width and height by summing the individual lengths of each part.

Uploaded by

Muin Badat
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
34 views

Cascading Style Sheets (CSS) Box Model: TGI Web Design & Development

The document discusses the CSS box model and how to correctly calculate element widths and heights. It explains the different parts of the box model - margin, border, padding, content - and how they affect sizing. It emphasizes that the width and height properties only control the content area, so padding, border and margin must be added to get the full element size. A formula is provided to calculate total element width and height by summing the individual lengths of each part.

Uploaded by

Muin Badat
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 9

TGI Web Design & Development

Cascading Style Sheets (CSS)


Box Model
Box

• CSS Box Model


Box

• Explanation of the different parts:


• Margin - Clears an area around the border. The margin
does not have a background color, it is completely
transparent
• Border - A border that goes around the padding and
content. The border is affected by the background color
of the box
• Padding - Clears an area around the content. The
padding is affected by the background color of the box
• Content - The content of the box, where text and images
appear
• In order to set the width and height of an element
correctly in all browsers, you need to know how the box
model works.
Box

• Width and Height of an Element


• Important: When you specify the width
and height properties of an element with
CSS, you are just setting the width and
height of the content area. To know the
full size of the element, you must also add
the padding, border and margin.
Box

• The total width of the element in the example


below is 300px:

• width:250px;
padding:10px;
border:5px solid gray;
margin:10px; Let's do the math:
250px (width)
+ 20px (left and right padding)
+ 10px (left and right border)
+ 20px (left and right margin)
= 300px
Box

Your CSS:
div.ex
{
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
}
Box

• Your HTML code:


<img src="250px.gif" width="250"
height="1" /><br /><br />
<div class="ex">The line above is 250px
wide.<br />The total width of this element
is also 250px.</div>
http://www.w3schools.com/css/tryit.asp?file
name=
trycss_boxmodel_width
Box

• The total width of an element should always 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 always be
calculated like this:
• Total element height = height + top padding +
bottom padding + top border + bottom border +
top margin + bottom margin
Box Properties

• margin : <length>
• border : <style> <width> <color>
• padding : <length>
• width & height : <length>
• Examples:
p{
margin: 50px;
padding: 30px;
float: right;
height: 200px;
width: 400px;
border: 5px solid #006633;
}

You might also like