Scribd
Upload
17 views

Box Model

The document discusses the CSS box model which describes how elements are represented as rectangular boxes. It explains the four main parts that make up a box - content, padding, border, and margin. It provides examples of how to control dimensions, padding, borders, and margins using CSS properties. The document also introduces CSS layout techniques like flexbox and grids that allow positioning of elements, and the importance of the display property in controlling layout.

Uploaded by

ITs Me Prash
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
17 views

Box Model

The document discusses the CSS box model which describes how elements are represented as rectangular boxes. It explains the four main parts that make up a box - content, padding, border, and margin. It provides examples of how to control dimensions, padding, borders, and margins using CSS properties. The document also introduces CSS layout techniques like flexbox and grids that allow positioning of elements, and the importance of the display property in controlling layout.

Uploaded by

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

CSS BOX MODEL:

 The box model is a very important concept in CSS because it determines how elements are
positioned within the browser window.
 When laying out a document, the browser's rendering engine represents each element as a
rectangular box according to the standard CSS basic box model.
 The CSS box model is essentially a box that wraps around every HTML element.
 Every box is composed of four areas(or parts), defined by their respective edges:
 Content, Padding, Border and Margin.
 Content - Contains the "real" content of the element, such as text, an image.
 Padding - It is the transparent space between the content of the box and its border.
 Border – Even if u cannot see it, every box has a border .This separates the edge of one box from
other surrounding boxes.
 Margin – the margin is the distance between the border of a box and the box next to it.
 The actual space that an element's box might take on a web page is calculated as:

Box Size CSS Properties

Total Width width + padding-left + padding-right + border-left + border-right + margin-left + margin-right

Total Height height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom


 CSS Dimension Properties:
 CSS has several dimension properties, such as width, height, max-width, min-width, max-height, and
min-height that allow you to control the width and height of an element.
 The CSS height and width properties are used to set the height and width of the content area of an
element.
 This width and height does not include paddings, borders, or margins.
 The width and height properties can take the following values:
 auto - This is default. The browser calculates the height and width
 length - Defines the height/width in px, cm etc.
 % - Defines the height/width in percent of the containing block
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 100px;
width: 500px;
background-color: powderblue;
}
</style>
</head>
<body>
<div>This div element has a height of 100px and a width of 500px.</div>
</body>
</html>
 CSS Padding Properties:
 Padding is used to create space around an element's content, inside of any defined borders.
 The CSS padding properties are used to generate space around an element's content, inside of any
defined borders.
 CSS has properties for specifying the padding for each side of an element:
 padding-top
 padding-right
 padding-bottom
 padding-left
 All the padding properties can have the following values:
 length - specifies a padding in px, pt, cm, etc.
 % - specifies a padding in % of the width of the containing element
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lime;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
</style>
</head>
<body>
<div>This div element has a top padding of 50px, a right padding of 30px, a bottom padding of 50px, and a left padding of 80px.</div>
</body>
</html>
 The padding property is a shorthand property for the following individual padding properties: padding-
top, padding-right, padding-bottom, padding-left
 If the padding property has four values:
 padding: 25px 50px 75px 100px;
 top padding is 25px
 right padding is 50px
 bottom padding is 75px
 left padding is 100px
<html>
<head>
<style>
div {
padding: 25px 50px 75px 100px;
background-color: pink;
}
</style>
</head>
<body>
<h2>The padding shorthand property - 4 values</h2>
<div>This div element has a top padding of 25px, a right padding of 50px, a bottom padding of 75px, and a left
padding of 100px.</div>
</body>
</html>
 CSS Border Properties:
 The CSS border properties allow you to define the border area of an element's box.
 Borders appear directly between the margin and padding of an element.
 The border-style property specifies what kind of border to display.
 The border-style property can have the following values: none, hidden, solid, dashed, dotted,
double, inset, outset, groove, and ridge.
 The border-width property specifies the width of the border area.
o It is a shorthand property for setting the thickness of all the four sides (top, right, bottom, left) of
an element's border at the same time.
o Examples:
 border-width: 10px; /* 10px on all the 4 border sides*/
 border-width: 5px 20px; /* 5px top and bottom, 20px on the left and right*/
 border-width: 25px 10px 4px 35px; /* 25px top, 10px right, 4px bottom and 35px left */
o The border-color property specifies the color of the border area.
o This is also a shorthand property for setting the color of all the four sides of an element's border.
o Examples:
 border-color: green;
 border-color: red green blue yellow; /* red top, green right, blue bottom and yellow left */
 The border property is a shorthand property for the following individual border
properties:
 border-width
 border-style (required)
 border-color
Examples:
 border: 5px solid red;
 border-left: 6px solid red;
 border-bottom: 6px solid red;
 Example:
<!DOCTYPE html>
<html>
<head>
<style>
p{
border-style: dashed;
border-color: red;
border-width: 5px 10px 10px 5px;
}
</style>
</head>
<body>
<h2>The border Property</h2>
<p>Border Property Demo</p>
</body>
</html>
 CSS Margin Properties:
 The CSS margin properties allow you to set the spacing around the border of an element's box.
 An element's margin is not affected by its background-color, it is always transparent.
 CSS has properties for specifying the margin for each side of an element:
 margin-top
 margin-right
 margin-bottom
 margin-left
 All the margin properties can have the following values:
 auto - the browser calculates the margin. Used to horizontally center the element within its container.
 length - specifies a margin in px, pt, cm, etc.
 % - specifies a margin in % of the width of the containing element
Example:
DOCTYPE html>
<!

<html>
<head>
<style>
div {
border: 1px solid black;
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
background-color: orange;
}
</style>
</head>
<body>
<div>This div element has a top margin of 100px, a right margin of 150px, a bottom margin of 100px, and a left margin of
80px.</div>
</body>
</html>


CSS Layout:
 CSS page layout techniques allow us to take elements contained in a web page and control where
they're positioned relative to the following factors:
 their default position in normal layout flow,
 the other elements around them,
 their parent container, and
 the main viewport/window.
 Two such page layout techniques are:
 Flexbox
 Grid
 ‘display’ property:
 The display property is the most important CSS property for controlling layout.
 It specifies if/how an element is displayed.
 Every HTML element has a default display value depending on what type of element it is. The default
display value for most elements is block or inline.

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy