-
Hajipur, Bihar, 844101
Hajipur, Bihar, 844101
CSS Basics
CSS Styling Properties
CSS Box Model
CSS Margin
CSS Padding
CSS Borders
CSS Outline
CSS Height/Width
CSS Max-width
CSS Display
CSS Position
CSS Z-index
CSS Overflow
CSS Float
CSS Inline-block
CSS Align
CSS Box Sizing
CSS Text
CSS Fonts
CSS Icons
CSS Text Effects
CSS Web Fonts
CSS Colors
CSS Backgrounds
CSS Color Keywords
CSS Gradients
CSS Shadows
CSS Links
CSS Lists
CSS Tables
CSS Advanced Selectors & Features
CSS Combinators
CSS Pseudo-classes
CSS Pseudo-elements
CSS Attribute Selectors
CSS Specificity
CSS !important
CSS Units
CSS Variables
CSS @property
CSS Math Functions
CSS Media and Image Styling
CSS Image Styling
CSS Image Centering
CSS Image Filters
CSS Image Shapes
CSS object-fit
CSS object-position
CSS Masking
CSS Layout Techniques
CSS Website Layout
CSS Navigation Bar
CSS Dropdowns
CSS Image Gallery
CSS Counters
CSS Pagination
CSS Multiple Columns
CSS User Interface
CSS Flexbox
CSS Grid
CSS Responsive Design (RWD)
CSS Padding is the space between the content of an element and its border.
It pushes the content inward, creating spacing inside the element.
element {
padding: 20px;
}
✅ Adds 20px padding to all four sides.
padding-top: 10px;
padding-right: 15px;
padding-bottom: 20px;
padding-left: 25px;
padding: 10px 15px 20px 25px;
This means:
Top → 10px
Right → 15px
Bottom → 20px
Left → 25px
padding: 10px 15px;
/* Top & Bottom = 10px, Left & Right = 15px */
padding: 10px 15px 20px;
/* Top = 10px, Right & Left = 15px, Bottom = 20px */
By default, padding increases the total size of the element (unless box-sizing: border-box
is used).
Q1. Apply 25px padding on all sides of a <div>
.
Q2. Set only the top padding of a paragraph to 10px.
Q3. Add 15px left padding to an image element.
Q4. Use shorthand to set: Top = 5px, Right = 10px, Bottom = 15px, Left = 20px.
Q5. Apply 10px padding to the top and bottom, and 5px to left and right.
Q6. Write a class .card
with 20px padding all around.
Q7. Add a 10px bottom padding to all <h2>
elements.
Q8. Use internal CSS to add 15px right padding to all <li>
items.
Q9. Write a rule that applies different padding for each side on a container.
Q10. Prevent padding from increasing element size using box-sizing
.
CSS Basics
CSS Styling Properties
CSS Box Model
CSS Margin
CSS Padding
CSS Borders
CSS Outline
CSS Height/Width
CSS Max-width
CSS Display
CSS Position
CSS Z-index
CSS Overflow
CSS Float
CSS Inline-block
CSS Align
CSS Box Sizing
CSS Text
CSS Fonts
CSS Icons
CSS Text Effects
CSS Web Fonts
CSS Colors
CSS Backgrounds
CSS Color Keywords
CSS Gradients
CSS Shadows
CSS Links
CSS Lists
CSS Tables
CSS Advanced Selectors & Features
CSS Combinators
CSS Pseudo-classes
CSS Pseudo-elements
CSS Attribute Selectors
CSS Specificity
CSS !important
CSS Units
CSS Variables
CSS @property
CSS Math Functions
CSS Media and Image Styling
CSS Image Styling
CSS Image Centering
CSS Image Filters
CSS Image Shapes
CSS object-fit
CSS object-position
CSS Masking
CSS Layout Techniques
CSS Website Layout
CSS Navigation Bar
CSS Dropdowns
CSS Image Gallery
CSS Counters
CSS Pagination
CSS Multiple Columns
CSS User Interface
CSS Flexbox
CSS Grid
CSS Responsive Design (RWD)