CSS Padding
Padding adds transparent space between an element's content and its border, expanding the element from the inside.
Padding is the space just inside the border, wrapping the content. Unlike margin, which pushes other elements away, padding grows the element itself and shows the element's own background color. It is what gives buttons and cards their comfortable inner breathing room.
Individual sides
Use <padding-top>, <padding-right>, <padding-bottom>, and <padding-left> to control each edge. Values can be lengths or percentages, but negative values are not allowed.
Per-side padding
<!DOCTYPE html>
<html>
<head>
<style>
.alert {
padding-top: 12px;
padding-right: 20px;
padding-bottom: 12px;
padding-left: 20px;
}
</style>
</head>
<body>
<div class="alert">Your changes have been saved.</div>
</body>
</html>Shorthand values
The <padding> shorthand follows the same one-to-four value pattern as margin, always in clockwise order starting from the top.
A padded button
<!DOCTYPE html>
<html>
<head>
<style>
.btn {
padding: 10px 18px;
background-color: #00643c;
color: #ffffff;
border: none;
}
</style>
</head>
<body>
<button class="btn">Sign up</button>
</body>
</html>Exercise: CSS Padding
In the shorthand `padding: 5px 10px 15px 20px;`, what order are the four values applied in?
