Lesson:
Margin, Padding,
Border, Outline and
CSS Box Model
</>
Topics Covered
Margi
Paddin
Borde
Outlin
CSS box model
Note: In the examples, we will mostly use a CSS unit called "pixel" which is represented by "px". However, we
can use other units depending on the example. In the upcoming section, we will explore different units of CSS
(absolute and relative) with examples.
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.
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.
Margin - shorthand property
Using the margin, we can specify all the margin properties in one property.
Margin property with four values
Note: We will use the same HTML code for all the margin examples.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/style.css" />
<title>Document</title>
</head>
<body>
<div class ="elementOne">Element 1</div>
<div class ="elementTwo">Element 2</div>
<div class ="elementThree">Element 3</div>
</body>
</html>
Full Stack Web Development
style.css:
.elementTwo {
margin: 10px 20px 30px 40px;
Browser output:
The first value is for the top margin, the second value is for the right margin, the third value is for the bottom
margin, and the fourth value is for the left margin.
Margin property with three values.
style.css:
.elementTwo {
margin: 20px 40px 30px
Browser output:
Full Stack Web Development
The first value is for the top margin, the second value is for the right margin and the left margin, and the
third value is for the bottom margin.
Margin property with two values
style.css:
.elementTwo {
margin: 20px 40px
Browser Output:-
The first value is for the top margin and bottom margin and the second value is for the right margin
and left margin.
Margin property with only one value
Style.css
.elementOne{
margin: 10px
Full Stack Web Development
Browser Output:-
All sides of an element have the same margin value.
Margin - Individual Sides
We can specify the margin for each side of an element.
style.css
.elementTwo{
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px; }
Browser Output:-
Full Stack Web Development
margin collapse
The top and bottom margins of elements are sometimes collapsed into a single margin that is equal to
the largest of the two margins.
This does not happen on the left and right margins. only top and bottom margins.
style.css:
.elementOne {
margin: 40px 20px
.elementTwo {
margin: 20px 0px
}
Browser Output:-
Padding
The padding property allows you to specify how much space should appear between the content of an
element and its border.
Full Stack Web Development
The padding specifies a shorthand property for setting the margin.
The padding-bottom specifies the bottom margin of an element.
The padding-top specifies the top margin of an element.
The padding-left specifies the left margin of an element.
The padding-right specifies the right margin of an element.
Padding - Shorthand Property
Using padding, we can specify all the padding properties in one property.
Padding property with four values
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/style.css" />
<title>Document</title>
</head>
<body>
<div class="boxOne">
<h1 class="heading" > Padding </h1>
</div>
<div class="boxTwo">
<h1 class="heading" > Padding </h1>
</div>
<div class="boxThree">
<h1 class="heading" > Padding </h1>
</div>
</body>
</html>
style.css:
.boxTwo{
padding: 10px 20px 30px 40px;
Full Stack Web Development
Browser Output:
padding property with three values.
style.css:
.boxTwo {
padding: 20px 40px 30px;
}
The first value is for top padding, the second value is for left and right padding and the third value is for
bottom padding.
Browser output:
Full Stack Web Development
padding property with two values
style.css:
.boxTwo {
padding: 20px 40px;
}
Browser output:
The first value is for the padding-top and padding-bottom and the second value is for the padding-right
and padding-left.
padding property with only one value
style.css
div {
border: solid 2px black;
.elementTwo {
padding: 40px;
Full Stack Web Development
Browser output:
padding - Individual Sides
We can specify the padding for each side of an element.
style.css
.boxTwo{
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px; }
Browser output:
Full Stack Web Development
Border
The border properties allow you to specify how the border of the box representing an element should
look. There are three properties of a border you can change.
The border-style specifies the style of a border (solid, dashed line, double, groove, ridge, inset, outset)
The border-color specifies the color of a border.
The border-width specifies the width of a border(border-left width, border-right width, border-bottom
width, border-top width).
The border-radius specifies the radius of a border.
border-style:
The border-style property allows you to select one of the following styles of border
“none” - no border
“solid” - the border is a single solid line
“dotted” - the border is a single dotted line.
“dashed” - the border is a single dashed line
“double” - the border is two solid lines
“groove” - the border looks like it is carved into a page
“ridge” - the border makes
“inset” - The border makes the box look like it is embedded in the page
“Outset” - The border makes the box look like it is coming out of the canvas.
We can also individually change the border style of the left, right, bottom, and top borders of an
element by using border-left-style, border-right-style, border-top-style, and border-bottom style.
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./style.css" />
<title>Document</title>
</head>
<body>
<div class="none">none</div>
<div class="solid">solid</div>
<div class="dotted">dotted</div>
Full Stack Web Development
<div class="dashed">dashed</div>
<div class="double">double</div>
<div class="groove">groove</div>
<div class="ridge">ridge</div>
<div class="inset">inset</div>
<div class="outset">outset</div>
<div class="mixup">dashed, dotted, solid,and inset</div>
</body>
</html>
style.css
.none {
border-style: none;
.solid {
border-style: solid;
.dotted {
border-style: dotted;
.double {
border-style: double;
.dashed {
border-style: dashed;
.groove {
border-style: groove;
.ridge {
border-style: ridge;
.inset {
border-style: inset;
Full Stack Web Development
.outset {
border-style: outset;
.mixup{
border-top-style: dashed;
border-right-style: dotted;
border-bottom-style: solid;
border-left-style: inset
Browser output:
border-width:
The border-width property allows you to set the width of an element's border. 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 also individually set the border width of the left, right, bottom, and top sides of an element by
using border-left-width, border-right-width, border-top-width, and border-bottom-width.
html.css
Full Stack Web Development
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
<link rel="stylesheet" href="./style.css" />
<title>Document</title>
</head>
<body>
<div class="thin">thin</div>
<div class="medium">medium</div>
<div class="thick">thick</div>
<div class="unitValue">set border width individually</
div>
</body>
</html>
Style.css
.thin {
border-style: solid;
border-width: thin;
.medium {
border-style: solid;
border-width: medium;
.thick {
border-style: solid;
border-width: thick;
.unitValue {
border-style: solid;
border-top-width: 2px;
border-right-width: 2pt;
border-bottom-width: 0.3cm;
border-left-width: 5px;
Full Stack Web Development
Browser output:
border-color:
The border color property allows us to change the border color, we can also change the border-
bottom-color, border-top color, border-right-color, and border-left color of an element individually.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
<link rel="stylesheet" href="./style.css" />
<title>border color</title>
</head>
<body>
<div class="boxOne">box One</div>
<div class="boxTwo">box Two</div>
</body>
</html>
Style.css
.boxOne {
border-color: black;
border-style: solid;
.boxTwo {
border-style: solid;
border-color: red blue green yellow;
Full Stack Web Development
Browser output:
Border radius
Using the border-radius property, we can set the rounded borders and provide the rounded corners
around an element, tag, or div. The border-radius defines the radius of the corners of an element.
Border radius - shorthand property
We can specify all the border-radius properties in one property.
Border radius with four values
Note: We will use the same HTML code for all the border-radius examples.
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
<link rel="stylesheet" href="./style.css" />
<title>Document</title>
</head>
<body>
<div class="box">border radius</div>
</body>
</html>
style.css
.box {
border-style: solid;
border-radius: 20px 70px 40px 10px;
Full Stack Web Development
Browser output:
Border radius with two values
Style.css:
.box {
border-style: solid;
border-radius: 20px 40px ;
Browser output:
Border radius with one value
Style.css:
.box {
border-style: solid;
border-radius: 20px;
Browser output:
Border radius - individual side
Style.css:
Full Stack Web Development
.box {
border-style: solid;
border-top-left-radius: 20px;
border-top-right-radius: 70px
border-bottom-right-radius: 40px
border-bottom-left-radius: 10px
}
Browser output:
Border - shorthand property
To shorten the code, it is also possible to specify all the individual border properties in one property
except border-radius.
The border property is a shorthand property for the following individual border properties
border-widt
border-style (required
border-color
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
<link rel="stylesheet" href="./style.css" />
<title>Document</title>
</head>
<body>
<div class="box">border radius</div>
</body>
</html>
Full Stack Web Development
style.css
.box {
border: solid 5px purple;
}
Browser output:
Outline
The CSS outline properties allow you to define an outline area around an element's box.
An outline is a line that is drawn just outside the border edge of the elements. Outlines are generally used to
indicate the focus or active states of elements such as buttons, links, form fields, etc.
You can set the following outline properties using CSS
outline-styl
outline-colo
outline-widt
outline-offse
Outline
Outline style
You can set the style of an outline using the outline-style property. The outline-style property accepts a
range of values that determine the style of the outline. Here are some common outline styles you can
use in CSS
“solid” - creates a solid line around the element
“dotted” - creates a dotted line around the element
“dashed”- creates a dashed line around the element
“double” - creates a double line around the element
“groove”- creates a 3D groove effect around the element.
Full Stack Web Development
“ridge” - creates a 3D ridge effect around the element
“inset” - creates a 3D inset effect around the element
“outset”- creates a 3D outset effect around the element
“none” - removes the outline from the element.
Here's an example of how to set the outline-style property:
Index.html
<div class="solid">outline solid</div>
<div class="dotted">outline dotted</div>
<div class="dashed">outline dashed</div>
<div class="double">outline double</div>
<div class="groove">outline groove</div>
<div class="ridge">outline ridge</div>
<div class="inset">outline inset</div>
<div class="outset">outline outset</div>
<div class="none">outline none</div>
Style.css
.solid { outline-style: solid;}
.dotted { outline-style: dotted;}
.dashed { outline-style: dashed;}
.double{outline-style: double;}
.groove { outline-style: groove;}
.ridge {outline-style: ridge;}
.inset {outline-style: inset;}
.outset {outline-style: outset;}
.none { outline-style: none; }
Browser output:
Full Stack Web Development
Outline color
you can set the color of an outline using the outline-color property.
Here's an example of how to set the outline-color property:
Index.html
<div class= "outlineColor> outline color</div>
style.css
.outlineColor {
outline-style: solid;
outline-color: blue;
}
Browser output:
Outline-wight
The outline-width property specifies the width of the outline and can have one of the following values
thin (typically 1px
medium (typically 3px
thick (typically 5px
A specific size (in px, pt, cm, em, etc)
Here's an example of how to set the outline-width property:
index.html
<div class="thin">outline thin</div>
<div class="thick">outline thick</div>
<div class="medium">outline medium</div>
<div class="specificSize">unit value</div>
style.css:
.thin {
outline-style: solid;
outline-width: thin;
Full Stack Web Development
.medium {
outline-style: solid;
outline-width: medium;
.thick {
outline-style: solid;
outline-width: thick;
.specificSize {
outline-style: solid;
outline-width: 6px;
Browser output:
Outline offset
The outline-offset property adds space between an outline and the edge/border of an element. The
space between an element and its outline is transparent.
Here's an example of how to set the outline-offset property:
Index.html
<div class="offset">outline offset</div>
style.css:
.offset {
margin: 3rem;
outline-offset: 10px;
outline-style: solid;
outline-color: green;
border-style: solid;
Full Stack Web Development
Browser output:
Outline shorthand property
The outline property is a shorthand property for setting the following individual outline properties
outline-widt
outline-style (required
outline-color
outline: [outline-style] [outline-width] [outline-color];
Where outline-style, outline-width, and outline-color are optional values that can be specified in any
order. Here are some examples:
index.html
<div class="three">outline shorthand</div>
<div class="two">outline shorthand</div>
<div class="one">outline shorthand</div>
style.css:
.three{ outline: solid 2px blue; }
.two{ outline: solid red; }
.one{ outline: solid }
Browser output:
we can also use the outline shorthand property to set individual outline properties, by omitting one or
more of the values.
Example:
index.html
<div class="outline">outline</div>
Full Stack Web Development
style.css
.outline{
outline: dotted;
Browser output:
Note: It's important to note that the outline property is different from the border property. While the border
affects the element's layout and size, an outline does not.
Box model
The CSS box model is a container that contains multiple properties, including borders, margins, padding,
and the content itself. It is used to create the design and layout of web pages. According to the CSS box
model, the web browser supplies each element as a square prism.
The following diagram illustrates the box model.
Properties of the box model
Content
The content area consists of content like images, text, or other forms of media content, the height and
width properties help to modify the box dimensions.
Padding
The padding area is the space around the content area and within the border box. It can be applied to all
sides of the box or to the specific, selected side(s) - top, right, bottom, and/or left.
Margin
The margin area consists of space between the border and the margin, the margin does not possess its
own background color and is completely transparent, it shows the background color of the element, like the
body element.
Border
The border area surrounds the padding and the content, and can be applied to all the sides of the box or to
selected sides/side top, right, bottom, and left.
Full Stack Web Development
