- CSS Introduction
- CSS Syntax
- CSS Selectors
- How To Add CSS
- CSS Comments
- CSS Backgrounds
- CSS Borders
- CSS Margins
- CSS Padding
- CSS Height - Width
- CSS Box Model
- CSS Outline
- CSS Text
- CSS Links
- CSS Lists
- CSS Tables
- CSS Display
- CSS Max-width
- CSS Position
- CSS Overflow
- CSS Float
- CSS Inline-block
- CSS Align
- CSS Combinators
- CSS Pseudo-classes
- CSS Pseudo-elements
- CSS Opacity
- CSS Navigation Bar
- CSS Dropdowns
- CSS Image Gallery
- CSS Attr Selectors
- CSS Forms
- CSS Counters
- CSS Website Layout
- CSS !important
- CSS Rounded Corners
- CSS Border Images
- CSS Backgrounds
- CSS Colors
- CSS Color Keywords
- CSS Gradients
- CSS Radial Gradients
- CSS Text Effects
- CSS Web Fonts
- CSS 2D Transforms
- CSS 3D Transforms
- CSS Transitions
- CSS Animations
- CSS Tooltip
- CSS Image Reflection
- CSS The Object-fit
- CSS Object-position
- CSS Button
- CSS Pagination
- CSS Multiple Columns
- CSS User Interface
- CSS Variables
- CSS Box-sizing
- CSS Media Queries
- CSS Flexbox
CSS Padding
CSS Padding
The padding properties of CSS are used to generate space around the content of an element, within any defined borders.
CSS gives you complete control over padding. There are properties for configuring the padding along each side of an element (top, right, bottom, and left).
Padding - Individual Sides
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
- inherit - specifies that the padding should be inherited from the parent element
<html>
<head>
<style>
div {
border: 1px solid black;
background-color:blue;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
</style>
</head>
<body>
<h2>Using individual padding properties</h2>
<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>
Padding - Shorthand Property
It is possible to specify all padding properties in a single property to shorten the code.
The padding property is an abbreviation for the subsequent individual padding properties:
padding-top
padding-right
padding-bottom
padding-left
So, here is how it works:
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 {
border: 1px solid black;
padding: 25px 50px 75px 100px;
background-color: blue;
}
</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>
Padding And Element Width
The CSS width property specifies the width of the content area of an element. The content area is the region within an element's padding, border, and margin (the box model).
Therefore, if an element has a specified width, the padding added to it will be added to the element's total width. This is frequently an undesirable outcome.
<html>
<head>
<style>
div.exa1 {
width: 300px;
background-color: orange;
}
div.exa2 {
width: 300px;
padding: 25px;
background-color:blue;
}
</style>
</head>
<body>
<h2>Padding and element width</h2>
<div class="exa1">This div is 300px wide.</div>
<br>
<div class="exa2">The width of this div is 350px, even though it is defined as 300px in the CSS.</div>
</body>
</html>
Products
Partner
Copyright © RVR Innovations LLP 2024 | All rights reserved - Mytat.co is the venture of RVR Innovations LLP