Menu
Box Model & Layout
CSS Padding
Create breathing room inside elements.
1Inner Space
Padding adds space inside the border, keeping content away from edges.
Example Code
css
div {
padding: 20px; /* All sides */
padding-left: 40px;
}2Understand it in a real interface
Padding belongs inside the element’s box and contributes to the clickable area of a button or link. A comfortable text inset can make a panel easier to read, but large fixed padding may leave little content space on a small screen. Combine it with an appropriate box-sizing model.
3Try it yourself
Give a button horizontal and vertical padding and test short and long labels. Narrow its container and check whether the label wraps or overflows. Adjust the spacing without forcing a fixed width, and compare the interaction area with the text itself.
Finished reading?
Mark this topic as complete to track progress.