Scribd
Upload
32 views9 pages

Lec-11-W6 - (Box Model)

The document discusses CSS box model properties including dimensions, padding, borders, and margins. It provides examples of how to set widths, heights, padding for individual sides or all sides, border styles and colors, and margin for individual sides or all sides.

Uploaded by

muhammadmurtaza6211
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
32 views9 pages

Lec-11-W6 - (Box Model)

The document discusses CSS box model properties including dimensions, padding, borders, and margins. It provides examples of how to set widths, heights, padding for individual sides or all sides, border styles and colors, and margin for individual sides or all sides.

Uploaded by

muhammadmurtaza6211
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

WEB DEVELOPMENT

Lecturer – W6
Lecture Outline

▪ CSS Box Model


▪ CSS Dimension
▪ CSS padding properties
▪ CSS Border Properties
▪ CSS Margin Properties
▪ Text properties
The CSS Box Model
▪ Each HTML element can be
considered as a boxe.
▪ When laying out a web page, the
browser represents each element
as a rectangular box. Content

▪ CSS define the size, position and


properties of these boxes.
▪ Every box is composed of four
parts
▪ i.e. content, padding, border
and margin
Example: The CSS Box Model
<!DOCTYPE html>
<html>
<head> <title>The Box Model</title>
<style>
div {background-color:rgb(241, 209, 209);
width: 300px;
height: 200px;
padding: 25px;
border: 25px solid rgb(24, 24, 197);
margin: 15px;}
</style>
</head>
<body>
<div> Every element in a document, if it is a block-level
or inline element, generates a rectangular
box……………………………………………… For this div element, the value of
width and height are 300px and 200px respectively. It has
padding and border of 25px each, and margin is 15px.
</div>
</body>
</html>
CSS Dimension
▪ CSS Dimensions properties
▪ width, max-width, min-width,
height, max-height, and min-
height
▪ Setting the Width and Height.
▪ Example
▪ div { width: 250px;
height: 180px;
div {min-height: }
150px;
max-height: 400px;
min-width: 200px;
max-width: 450px; }
CSS padding properties

▪ The CSS padding properties allow you to set the spacing


between the content of an element and its border.
▪ Specify the padding for : top, bottom, right or left or set
padding for all sides.

p { padding-top: 40px; padding-bottom: 60px;


padding-left: 50px; padding-right: 50px; }
Examples: CSS Padding
▪ If the padding property has four values:
p { padding: 25px 50px 75px 100px};
▪ If the padding property has three values:
p { padding: 25px 50px 75px; }
▪ If the padding property has two values:
p { padding: 25px 75px; }
▪ If the padding property has one value:
p { padding: 70px;}
CSS Border Properties

▪ The CSS border properties allow you to define the border


area of an element's box.
▪ border-styles
▪ border-width h1 { border-style: double;
▪ border-color border-width: 15px;
border-color: blue; }

h1 { border: 15px double blue; }


CSS Margin Properties

▪ Margin property is used to set spacing around the border.


p { margin-top: 60px;
margin-bottom: 60px;
margin-left: 100px;
p { margin: 50px; } margin-right: 100px;}
p { margin: 25px 75px; }
p { margin: 25px 50px 75px; }
p { margin: 25px 50px 75px 100px; }

You might also like