❯

 Tutorials  References  Exercises  Certificates  Search... Upgrade Get Certified

HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY

References
CSS Tutorial Filter... ×
×
ADVERTIS
ADVERTISEMENT

CSS HOME
CSS Introduction
CSS Syntax
CSS Selectors
CSS How To CSS Padding
CSS Comments
CSS Errors ❮ Previous Next ❯
CSS Colors 
CSS Backgrounds 
CSS Borders 
CSS Margins 
CSS Padding
This element has a padding of 70px.
CSS Height/Width
CSS Box Model
CSS Outline 
CSS Text 
CSS Fonts 
Try it Yourself »
CSS Icons
CSS Links
CSS Lists
CSS Tables  CSS Padding
CSS Display
CSS Max-width The CSS padding properties are used to generate space around an element's content, inside of any
CSS Position defined borders.
CSS Z-index
With CSS, you have full control over the padding. There are properties for setting the padding for each side
CSS Overflow
of an element (top, right, bottom, and left), and a shorthand property for setting all the padding properties in
CSS Float 
CSS I li bl k
CSS Inline-block
one declaration. ❯
 Tutorials  References  Exercises  Certificates  Upgrade Get Certified

HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY

References
CSS Tutorial
Padding - Individual Sides
×
×
ADVERTIS

CSS HOME
CSS has properties for specifying the padding for each side of an element:

CSS Introduction
padding-top - sets the top padding of an element
CSS Syntax
padding-right - sets the right padding of an element
CSS Selectors
padding-bottom - sets the bottom padding of an element
CSS How To
padding-left - sets the left padding of an element
CSS Comments
CSS Errors All the padding properties can have the following values:
CSS Colors  COLOR
CSS Backgrounds length - specifies a padding in px, pt, cm, etc.
 PICKER
CSS Borders % - specifies a padding in % of the width of the containing element

inherit - specifies that the padding should be inherited from the parent element
CSS Margins 
CSS Padding
Note: Negative values are not allowed.
CSS Height/Width
CSS Box Model
CSS Outline  Example 
CSS Text  
CSS Fonts  Set different padding for all four sides of a <div> element:
CSS Icons
CSS Links div {
padding-top: 50px;
CSS Lists
padding-right: 30px;
CSS Tables  padding-bottom: 50px;
CSS Display padding-left: 80px;
CSS Max-width }
CSS Position
CSS Z-index
Try it Yourself »
CSS Overflow
CSS Float 
CSS I li bl k
CSS Inline-block
❯
 Tutorials  References  Exercises  Certificates  ADVERTISEMENT Upgrade Get Certified

HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY

References
CSS Tutorial
Padding - Shorthand Property
×
×
ADVERTIS

CSS HOME To shorten the code, it is possible to specify all the padding properties in one declaration.
CSS Introduction
CSS Syntax The padding property is a shorthand property for the following individual padding properties:
CSS Selectors
CSS How To padding-top
CSS Comments padding-right

CSS Errors
padding-bottom

CSS Colors
padding-left

CSS Backgrounds  Here is how it works:
CSS Borders 
CSS Margins  If the padding property has four values:
CSS Padding
CSS Height/Width padding: 25px 50px 75px 100px;
CSS Box Model top padding is 25px
CSS Outline
right padding is 50px

bottom padding is 75px
CSS Text 
left padding is 100px
CSS Fonts 
CSS Icons
CSS Links
CSS Lists
Example
CSS Tables  Use the padding shorthand property with four values:
CSS Display
CSS Max-width div {
CSS Position padding: 25px 50px 75px 100px;
CSS Z-index }

CSS Overflow
CSS Float 
CSS I li bl k
CSS Inline-block
Try it Yourself » ❯
 Tutorials  References  Exercises  Certificates  Upgrade Get Certified

HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY

References
CSS Tutorial
If the padding property has three values:
×
×
ADVERTIS

padding: 25px 50px 75px;

CSS HOME
top padding is 25px
CSS Introduction
right and left paddings are 50px
CSS Syntax
bottom padding is 75px
CSS Selectors
CSS How To
CSS Comments
Example
CSS Errors
CSS Colors  Use the padding shorthand property with three values:
CSS Backgrounds 
CSS Borders div {

padding: 25px 50px 75px;
CSS Margins 
}
CSS Padding
CSS Height/Width
CSS Box Model Try it Yourself »
CSS Outline 
CSS Text 
CSS Fonts If the padding property has two values:

CSS Icons
padding: 25px 50px;
CSS Links
top and bottom paddings are 25px
CSS Lists
right and left paddings are 50px
CSS Tables 
CSS Display
CSS Max-width
Example
CSS Position
CSS Z-index Use the padding shorthand property with two values:
CSS Overflow
CSS Float 
CSS I li bl k
CSS Inline-block
❯
 Tutorials 
div {
References  Exercises  Certificates 
padding: 25px 50px;
Upgrade Get Certified

}
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY

References Try it Yourself »

CSS Tutorial ×
×
ADVERTIS

CSS HOME
CSS Introduction
CSS Syntax If the padding property has one value:
CSS Selectors
padding: 25px;
CSS How To
all four paddings are 25px
CSS Comments
CSS Errors
CSS Colors  Example
CSS Backgrounds 
CSS Borders  Use the padding shorthand property with one value:
CSS Margins 
CSS Padding div {
CSS Height/Width padding: 25px;
}
CSS Box Model
CSS Outline 
CSS Text Try it Yourself »

CSS Fonts 
CSS Icons
CSS Links
CSS Lists
CSS Tables
Padding and Element Width

CSS Display
The CSS width property specifies the width of the element's content area. The content area is the
CSS Max-width
portion inside the padding, border, and margin of an element (the box model).
CSS Position
CSS Z-index So, if an element has a specified width, the padding added to that element will be added to the total width
CSS Overflow of the element. This is often an undesirable result.
CSS Float 
CSS I li bl k
CSS Inline-block
❯
 Tutorials  References 
Example Exercises  Certificates  Upgrade Get Certified

HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY

×
Here, the <div> element is given a width of 300px. However, the actual width of the <div> element will be
350px (300px + 25px of left padding + 25px of right padding): ADVERTIS
References
CSS Tutorial ×
CSS HOME div {
CSS Introduction width: 300px;
CSS Syntax padding: 25px;
}
CSS Selectors
CSS How To
CSS Comments Try it Yourself »
CSS Errors
CSS Colors 
CSS Backgrounds 
CSS Borders
CSS Margins
 Padding and box-sizing

CSS Padding
The box-sizing property defines how the width and height of an element are calculated: should they
CSS Height/Width
include padding and borders, or not.
CSS Box Model
CSS Outline  The box-sizing property can have the following values:
CSS Text 
CSS Fonts content-box - This is default. The width and height properties includes only the content (border

CSS Icons and padding are not included)
CSS Links
border-box - The width and height properties includes content, padding and border

CSS Lists
So, to keep the width at 300px, no matter the amount of padding, you can use the box-sizing:
CSS Tables  border-box; . This causes the element to maintain its actual width; if you increase the padding, the
CSS Display
available content space will decrease.
CSS Max-width
CSS Position
CSS Z-index
Example
CSS Overflow
CSS Float  Use the box-sizing property to keep the width at 300px, no matter the amount of padding:
CSS I li bl k
CSS Inline-block
❯
 Tutorials 
div {
References  Exercises 
width: 300px;
Certificates  Upgrade Get Certified

padding: 25px;
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY

×
box-sizing: border-box;
} ADVERTIS
References
CSS Tutorial ×
CSS HOME
Try it Yourself »
CSS Introduction
CSS Syntax
CSS Selectors
CSS How To
CSS Comments More Examples
CSS Errors
CSS Colors  Set the left-padding property
CSS Backgrounds  This example demonstrates how to set the left padding of a <p> element.
CSS Borders 
Set the right-padding property
CSS Margins  This example demonstrates how to set the right padding of a <p> element.
CSS Padding
CSS Height/Width Set the top-padding property
CSS Box Model This example demonstrates how to set the top padding of a <p> element.
CSS Outline 
CSS Text  Set the bottom-padding property
CSS Fonts This example demonstrates how to set the bottom padding of a <p> element.

CSS Icons
CSS Links
CSS Lists
?
CSS Tables  Exercise
CSS Display
CSS Max-width Drag and drop the correct values to set a top padding of 20px, right padding of
CSS Position 40px, bottom padding of 30px, and left padding of 50px.
CSS Z-index
CSS Overflow
CSS Float 
CSS I li bl k
CSS Inline-block
❯
 Tutorials  References  div {
Exercises Certificates  Upgrade Get Certified
padding: ;
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY
}

References
CSS Tutorial ×
×
ADVERTIS

50px 40px 20px 30px

CSS HOME
CSS Introduction
CSS Syntax
CSS Selectors Submit Answer »
CSS How To
CSS Comments
CSS Errors
CSS Colors 
CSS Backgrounds 
All CSS Padding Properties
CSS Borders 
CSS Margins  Property Description
CSS Padding
CSS Height/Width
padding A shorthand property for setting all the padding properties in one
declaration
CSS Box Model
CSS Outline  padding-bottom Sets the bottom padding of an element
CSS Text 
CSS Fonts padding-left Sets the left padding of an element

CSS Icons
padding-right Sets the right padding of an element
CSS Links
CSS Lists padding-top Sets the top padding of an element
CSS Tables 
CSS Display
CSS Max-width
❮ Previous Next ❯
CSS Position
CSS Z-index
CSS Overflow
CSS Float 
CSS I li bl k
CSS Inline-block
❯
 Tutorials  References  Exercises  Certificates  Upgrade Get Certified

HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY

References
CSS Tutorial ×
×
ADVERTIS

ADVERTISEMENT
CSS HOME
ADVERTISEMENT
CSS Introduction
CSS Syntax
CSS Selectors
CSS How To
CSS Comments
CSS Errors
CSS Colors
CSS Backgrounds  

PLUS SPACES GET CERTIFIED FOR TEACHERS

CSS Borders 
CSS Margins 
CSS Padding FOR BUSINESS CONTACT US
CSS Height/Width
CSS Box Model
CSS Outline TopTutorials Top References Top Examples
CSS Text  Tutorial
HTML HTML Reference HTML Examples
CSS Fonts CSS Tutorial CSS Reference CSS Examples

JavaScript Tutorial JavaScript Reference JavaScript Examples
CSS Icons How To Tutorial SQL Reference How To Examples
SQL Tutorial Python Reference SQL Examples
CSS Links Python Tutorial W3.CSS Reference Python Examples
CSS Lists W3.CSS Tutorial Bootstrap Reference W3.CSS Examples
Bootstrap Tutorial PHP Reference Bootstrap Examples
CSS Tables PHP
 Tutorial HTML Colors PHP Examples
Java Tutorial Java Reference Java Examples
CSS Display C++ Tutorial Angular Reference XML Examples
CSS Max-width jQuery Tutorial jQuery Reference jQuery Examples

CSS Position Get Certified

CSS Z-index HTML Certificate
CSS Certificate
CSS Overflow
JavaScript Certificate
CSS Float Front End Certificate

SQL Certificate
CSS I li bl k
CSS Inline-block Python Certificate
❯
 Tutorials  PHP Certificate
References 
jQuery Certificate
Exercises  Certificates  Upgrade Get Certified
Java Certificate
HTML CSS C++ CertificateSQL
JAVASCRIPT PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY

×
C# Certificate
XML Certificate
ADVERTIS
References
CSS Tutorial ×
CSS HOME
CSS Introduction      FORUM ABOUT ACADEMY
CSS Syntax
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning.
CSS Selectors Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness
of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.
CSS How To
Copyright 1999-2025 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.
CSS Comments
CSS Errors
CSS Colors 
CSS Backgrounds 
CSS Borders 
CSS Margins 
CSS Padding
CSS Height/Width
CSS Box Model
CSS Outline 
CSS Text 
CSS Fonts 
CSS Icons
CSS Links
CSS Lists
CSS Tables 
CSS Display
CSS Max-width
CSS Position
CSS Z-index
CSS Overflow
CSS Float 
CSS I li bl k