CSS Padding
All CSS topicsLast updated: Jun 10, 2026
∙ Topic
CSS Padding
Padding is the space inside an element, between its content and border. This lesson explains the syntax, practical use, common mistakes, accessibility considerations, and production best practices.
Syntax
.btn{padding:10px 14px}
.card{padding:18px 20px}📝 Edit Code
👁 Live Preview
💡 Edit the CSS and run the preview again.
Expected Output
A centered 280-pixel card whose declared width includes padding and border.Real-World Uses
- 1CSS Padding appears in production websites, dashboards, and component libraries.
- 2It helps designers and developers create consistent visual behavior.
- 3It supports responsive interfaces across phones, tablets, and desktops.
- 4It can be reused through classes, components, utilities, or design tokens.
- 5It improves maintainability when applied with a clear naming and cascade strategy.
Common Mistakes
- 1Using overly specific selectors that are difficult to override.
- 2Relying on fixed dimensions without testing responsive behavior.
- 3Ignoring keyboard focus, contrast, reduced motion, or readable text sizes.
- 4Repeating values instead of using reusable classes or custom properties.
- 5Testing only one browser or viewport size.
Best Practices
- 1Keep selectors simple and component-focused.
- 2Use logical, responsive sizing instead of unnecessary fixed values.
- 3Design visible focus states and sufficient color contrast.
- 4Use custom properties for shared colors, spacing, and typography.
- 5Inspect computed styles and test across supported browsers.
Core concept
- 1CSS Padding is primarily about sizing and spacing elements predictably.
- 2A CSS declaration combines a property with a valid value.
- 3Selectors decide which elements receive the declarations.
- 4The cascade, specificity, and source order decide the final computed style.
How to use it
- 1Start with semantic HTML before adding presentation.
- 2Choose the smallest selector that accurately targets the component.
- 3Add declarations in logical groups and use consistent formatting.
- 4Verify the result using browser developer tools.
Responsive and accessible CSS
- 1Allow content to reflow instead of clipping or overflowing.
- 2Preserve readable contrast and visible keyboard focus.
- 3Respect user preferences such as reduced motion.
- 4Test zoom, long text, and narrow screens.
Production checklist
- 1Check browser support for newer properties and values.
- 2Remove unused rules and avoid accidental global overrides.
- 3Confirm hover styles also have keyboard-accessible equivalents.
- 4Measure layout stability and rendering performance.
Quick Summary
- CSS Padding helps with sizing and spacing elements predictably.
- Selectors, declarations, and the cascade work together.
- Responsive rules should adapt to content and available space.
- Accessible CSS preserves contrast, focus, readability, and user preferences.
- Simple reusable rules are easier to maintain than highly specific overrides.
Interview Questions
Q1. What is the purpose of CSS Padding?
Answer: It is used for sizing and spacing elements predictably while keeping presentation separate from HTML structure.
Q2. How does the cascade affect this topic?
Answer: Origin, importance, specificity, scope, and source order determine which matching declaration wins.
Q3. What is a common mistake with CSS Padding?
Answer: A common mistake is using rigid or overly specific rules without testing content, accessibility, and responsiveness.
Q4. How do you debug this CSS?
Answer: Inspect the element, review matched and computed styles, check overridden declarations, and test the relevant state or viewport.
Q5. What production best practice applies here?
Answer: Prefer small reusable rules, documented tokens, accessible states, and browser-tested responsive behavior.
Quiz
Which approach is best for CSS Padding?