CSS Padding

Padding Properties

The padding property sets space inside an element on all four sides.

Individual sides: padding-top, padding-right, padding-bottom, padding-left.

Padding values can be lengths (px, em, rem) or percentages of the parent's width.

Padding cannot be negative (unlike margins).

/* Equal padding all sides */\n.box {\n  padding: 20px;\n}\n\n/* Vertical | Horizontal */\n.button {\n  padding: 10px 30px;\n}\n\n/* Top | Horizontal | Bottom */\n.card {\n  padding: 20px 30px 40px;\n}\n\n/* Top | Right | Bottom | Left */\n.custom {\n  padding: 10px 20px 30px 40px;\n}\n\n/* Individual sides */\n.content {\n  padding-top: 20px;\n  padding-bottom: 20px;\n  padding-left: 15px;\n  padding-right: 15px;\n}

Padding and Box Sizing

By default, padding adds to an element's total width and height.

box-sizing: border-box includes padding and border in the element's width/height.

border-box is often preferred for more predictable layouts.

Percentage padding is based on the parent's width, even for top/bottom.

/* Default box model */\n.box-content {\n  box-sizing: content-box; /* Default */\n  width: 200px;\n  padding: 20px;\n  /* Total width: 240px (200 + 20 + 20) */\n}\n\n/* Border box model */\n.box-border {\n  box-sizing: border-box;\n  width: 200px;\n  padding: 20px;\n  /* Total width: 200px (padding included) */\n}\n\n/* Global border-box */\n* {\n  box-sizing: border-box;\n}\n\n/* Percentage padding */\n.responsive {\n  padding: 5%; /* 5% of parent width */\n}