Scribd
Upload
133 views

Lesson 4 CSS Box Model

The document discusses the CSS box model. It explains that all HTML elements can be considered boxes in CSS. The CSS box model consists of margins, borders, padding, and the actual content. It provides an example of how to set widths, padding, borders, and margins to achieve a desired total width. The document also discusses how to correctly calculate widths and heights when using the box model, and provides an exercise for the reader to practice with.

Uploaded by

Helen Asuncion
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
133 views

Lesson 4 CSS Box Model

The document discusses the CSS box model. It explains that all HTML elements can be considered boxes in CSS. The CSS box model consists of margins, borders, padding, and the actual content. It provides an example of how to set widths, padding, borders, and margins to achieve a desired total width. The document also discusses how to correctly calculate widths and heights when using the box model, and provides an exercise for the reader to practice with.

Uploaded by

Helen Asuncion
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 17

UNDERSTANDING CSS:

The CSS Box Model


The CSS Box Model
• All HTML elements can be considered as boxes.
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. The image below illustrates the box
model:
The CSS Box Model
Example
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lightgrey;
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
</style>
</head>
<body>

<h2>Demonstrating the Box Model</h2>

<p>The CSS box model is essentially a box that wraps around every HTML element. It consists of: borders,
padding, margins, and the actual content.</p>

<div>This text is the actual content of the box. We have added a 25px padding, 25px margin and a 25px green
border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

</body>
</html>
Output
Width and Height of an Element
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.
Assume we want to style a <div> element
to have a total width of 350px:
Output
Example
div {
    width: 320px;
    padding: 10px;
    border: 5px solid gray;
    margin: 0; 
}
Here is the math:

320px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 0px (left + right margin)
= 350px
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
</style>
</head>
<body>

<h2>Calculate the total width:</h2>

<img src="klematis4_big.jpg" width="350" height="263" alt="Klematis">


<div>The picture above is 350px wide. The total width of this element is also
350px.</div>

</body>
</html>
Output
Exercise:
- Set the width of the div to "200px".
- Set the padding of the div to "25px".
- Set the border of the div to "25px solid navy".
- Set the margin of the div to "25px".
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lightblue;
}
</style>
</head>
<body>

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</div>

</body>
</html>
Output
Assignment:
1. Visit this website:
http://www.w3schools.com/css
2. Click CSS Position.
3. On your notebook copy important details,
steps on how to layout CSS using the
position property of an element.
4. Prepare for a hands-on activity regarding
the topic next meeting. I will pose in our FB
group page the activity that you are going to
make in our ICT Lab.
Quiz:
1. A term used when talking about design and layout in
CSS.
2. This part clears an area outside the border of a box.
3. Where text and images appear.
4. Clears an area around the content. This is transparent.
5. Part of the box that goes around the padding and content.

Problem Solving: (5 pts)


I. If I am going to create a div for header which has a margin
of 10px, a padding of 5px, a border of 5px and a content
width of 660px, what is the total width of the element div?
Show how the total width of an element should be calculated.

II. Identify and define the different CSS Position Property and
Z-index. (2 pts each)
Transitional Page
www.animationfactory.com

Backdrops:
- These are full sized
backdrops, just scale them up!
- Can be Copy-Pasted out of
Templates for use anywhere!

You might also like