Web Technology

Lecture- 12

CSS Box Model

Mr. Madhukar
Assistant Professor
Department of CSIT
KIET, Ghaziabad
 CSS Box Model
• The CSS box model is essentially a box that wraps around every HTML
element. It consists of: content, padding, borders and margins.
• The image below illustrates the box model:
 CSS Box Model
• Content - The content of the box, where text and images appear
• Padding - Clears an area around the content. The padding is transparent
• Border - A border that goes around the padding and content
• Margin - Clears an area outside the border. The margin is transparent
div {
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
 CSS Box Model: Border
• Border Properties:
• There are three properties of a border you can change:
• The border-color specifies the color of a border.
• The border-style specifies whether a border should be solid, dashed line,
double line, or one of the other possible values.
• The border-width specifies the width of a border.
 CSS Box Model: Border
• The border-color property allows you to change the color of the border
• surrounding an element. we can individually change the color of the bottom,
left, top and right sides of an element's border using the properties:
• border-bottom-color changes the color of bottom border.
• border-top-color changes the color of top border.
• border-left-color changes the color of left border.
• border-right-color changes the color of right border.
• <style type="text/css">
p.example1{border:1px solid;
border-bottom-color:#009900; /* Green */
border-top-color:#FF0000; /* Red */
border-left-color:#330000; /* Black */
border-right-color:#0000CC; /* Blue */}
 CSS Box Model: Border
The border-style Property:
The border-style property allows you to select one of the following styles of
border:
• none: No border. (Equivalent of border-width:0;)
• solid: Border is a single solid line.
• dotted: Border is a series of dots.
• dashed: Border is a series of short lines.
• double: Border is two solid lines.
• groove: Border looks as though it is carved into the page.
• ridge: Border looks the opposite of groove.
• inset: Border makes the box look like it is embedded in the page.
• outset: Border makes the box look like it is coming out of the canvas.
• hidden: Same as none, except in terms of border-conflict resolution fortable elements.
 CSS Box Model: Border
• You can individually change the style of the bottom, left, top, and right
borders of an element using the following properties:
• border-bottom-style changes the style of bottom border.
• border-top-style changes the style of top border.
• border-left-style changes the style of left border.
• border-right-style changes the style of right border.
Example:
<p style="border-width:4px; border-style:solid;">
This is a solid border.
</p>
 CSS Box Model: Border
• The border-width Property:
• The border-width property allows you to set the width of an element
borders.
• The value of this property could be either a length in px, pt, or cm, or it
should
• be set to thin, medium, or thick. we can individually change the width of the
bottom, top, left, and right borders of an element using the following
properties:
• border-bottom-width changes the width of bottom border.
• border-top-width changes the width of top border.
• border-left-width changes the width of left border.
• border-right-width changes the width of right border.
 CSS Box Model: Border
• <p style="border-width:4px; border-style:solid;">
• This is a solid border whose width is 4px.
• </p>
Border Properties Using Shorthand
• <p style="border:4px solid red;">
• This example is showing shorthand property for border.
• </p>
 CSS Box Model: Margin
• The margin property defines the space around an HTML element. It is
possible to use negative values to overlap content.
• We have the following properties to set an element margin.
• The margin specifies a shorthand property for setting the margin properties
in one declaration.
• The margin-bottom specifies the bottom margin of an element.
• The margin-top specifies the top margin of an element.
• The margin-left specifies the left margin of an element.
• The margin-right specifies the right margin of an element.
 CSS Box Model: Margin
• The Margin Property
• The margin property allows you to set all of the properties for the four margins in one
declaration. Here is the syntax to set margin around a paragraph:
<style type="text/css">
p {margin: 15px}all four margins will be 15px
p {margin: 10px 2%}
top and bottom margin will be 10px, left and right margin will be 2% of the total width of
the document.
p {margin: 10px 2% -10px}
top margin will be 10px, left and right margin will be 2% of the total width of the
document, bottom margin will be -10px
p {margin: 10px 2% -10px auto}
top margin will be 10px, right margin will be 2% of the total width of the document,
bottom margin will be -10px, left margin will be set by the brows</style>
 CSS Box Model: Margin
<p style="margin: 15px; border:1px solid black;">
all four margins will be 15px</p>
<p style="margin:10px 2%; border:1px solid black;">
top and bottom margin will be 10px, left and right margin will be 2% of the total
width of the document.</p>
<p style="margin: 10px 2% -10px; border:1px solid black;">
top margin will be 10px, left and right margin will be 2% of the total width of the
document, bottom margin will be -10px</p>
<p style="margin: 10px 2% -10px auto; border:1px solid black;">
top margin will be 10px, right margin will be 2% of the total width of
the document, bottom margin will be -10px, left margin will be set by the browser
</p>
 CSS Box Model: Padding Property
• The padding property allows you to specify how much space should appear
between the content of an element and its border: The value of this attribute
should be either a length, a percentage, or the word inherit. If the value is
inherit, it will have the same padding as its parent element. If a percentage is
used, the percentage is of the containing box.
• we can also set different values for the padding on each side of the box using
the following properties:
• The padding-bottom specifies the bottom padding of an element.
• The padding-top specifies the top padding of an element.
• The padding-left specifies the left padding of an element.
• The padding-right specifies the right padding of an element.
• The padding serves as shorthand for the preceding properties.
 CSS Box Model: Padding Property
<p style="padding: 15px; border:1px solid black;">
all four padding will be 15px
</p>
<p style="padding:10px 2%; border:1px solid black;">
top and bottom padding will be 10px, left and right padding will be 2%
of the total width of the document.
</p>
<p style="padding: 10px 2% 10px; border:1px solid black;">
top padding will be 10px, left and right padding will be 2% of the total
width of the document, bottom padding will be 10px
</p>
<p style="padding: 10px 2% 10px 2%; border:1px solid black;">
top padding will be 10px, right padding will be 2% of the total width of
the document, bottom padding and top padding will be 10px
</p>
Thank You