CSS Tutorial
CSS Padding
Padding is space inside the border, around the content. It does not collapse.
Space inside the border
Padding is the gap between the content and the border. The background fills the padding. That is why a teal card with padding looks like a panel, and a teal card with only margin looks like a tight strip of text with empty page around it.
Margin separates boxes from each other. Padding separates a box’s own words from its edge. You usually want both: padding inside a card, margin between cards.
Four sides
padding-top, padding-right, padding-bottom, andpadding-left set each edge. Lengths and em / rem work.0 pulls the content flush to the border. Negative padding is invalid and ignored.
Example
<style>
h1 {
color: teal;
}
.card {
background: #0284c7;
color: #fff;
padding-top: 1.25rem;
padding-right: 1rem;
padding-bottom: 1.25rem;
padding-left: 1rem;
}
p {
color: #475569;
}
</style>
<h1>Harbor studio</h1>
<p class="card">Open 8–16.</p>
<p>Sky fills the padding around the hours.</p>Shorthand
padding follows the same one-, two-, three-, and four-value rules as margin. One value hits every side. Two values are top/bottom then left/right. Four values walk clockwise from the top.
| Written | Means |
|---|---|
padding: 1rem; | All four sides 1rem |
padding: 0.75rem 1.1rem; | Vertical, then horizontal |
padding: 1rem 1rem 1.5rem; | Top, sides, extra bottom |
padding: 0.5rem 1rem 1rem 1.25rem; | Top, right, bottom, left |
Example
<style>
h1 {
color: teal;
}
.card {
background: #f0f9ff;
border: 2px solid #0284c7;
color: #0c4a6e;
padding: 0.75rem 1.1rem;
}
p {
color: #475569;
}
</style>
<h1>Harbor studio</h1>
<p class="card">Open 8–16. Equal vertical padding, a little more on the sides.</p>Padding does not collapse
Two paddings that meet do not merge. A card with padding-bottom: 16px above a card withpadding-top: 16px leaves 32px of painted space between the two lines of text — plus any margin in between. That is the opposite of vertical margin collapse.
Example
<style>
h1 {
color: teal;
margin-bottom: 0.5rem;
}
.slot {
background: #e0f2fe;
color: #0c4a6e;
padding: 16px 0.75rem;
margin: 0;
}
p {
color: #475569;
}
</style>
<h1>Harbor studio</h1>
<div class="slot">First sitting</div>
<div class="slot">Second sitting</div>
<p>Open 8–16. The gap between the two lines is 32px of padding, not 16px.</p>If two panels look too far apart, check padding on both, then margin. Padding is inside each background, so it always “counts” in the picture you see.
Padding and width: a box-sizing teaser
By default, width sizes the content box. Padding and border add extra pixels outside that width. A card set to width: 200px with padding: 20px and a 2px border becomes 244px on the page. Layout math gets ugly fast.
box-sizing: border-box folds padding and border into the width you named. Thebox sizing chapter sets that on every element. Until then, know that adding padding can make a box wider than you wrote.
Example
<style>
h1 {
color: teal;
}
.content-box {
width: 180px;
padding: 16px;
border: 4px solid #0284c7;
background: #f0f9ff;
color: #0c4a6e;
}
.border-box {
box-sizing: border-box;
width: 180px;
padding: 16px;
border: 4px solid teal;
background: #ecfeff;
color: #0f766e;
margin-top: 0.75rem;
}
p {
color: #475569;
}
</style>
<h1>Harbor studio</h1>
<div class="content-box">Open 8–16. This box is wider than 180px.</div>
<div class="border-box">This box stays 180px including padding and border.</div>Click Try it in CSS and compare the two cards. The editor is /css/try. Height and width, then the full box model, come next in the tutorial.
Padding vs margin
| Padding | Margin | |
|---|---|---|
| Where | Inside the border | Outside the border |
| Background | Fills the padding | Does not fill the margin |
| Collapse | No | Vertical margins yes |
| Negative | Invalid | Allowed, use carefully |
Pick padding when the space should be part of the panel. Pick margin when the space should be empty page between panels.
Worked examples
The short listings above show one property. These sheets paint documents you would actually ship: a lab dashboard, a clinic form, a marks table, a nav bar.
CSS does not invent meaning. HTML already said what the pieces are. Cascade, specificity, and the box model decide how they look. The numbers are classroom values — current, pH, pulse, 3-4-5 — so the style has something real to sit on.
Preview them in the CSS editor at /css/try. Change one property and watch the page paint. The tags stay the same.
Biology
Breathing room inside a vitals tile
Padding is inside the border, around the content. It does not collapse. Background fills padding, which is why a tight label looks glued to its edge.
padding: 0.4rem 1rem is top/bottom then left/right. Four values run clockwise from the top.
Example
<style>
.tile { padding: 1rem; background: #fef3c7; }
</style>
<p class="tile">36.8 °C · 72 bpm</p>Engineering
A chip with wide sides
Short vertical padding and wider horizontal padding is how a status chip gets a pill shape later with radius. Start with padding; radius is another chapter.
Example
<style>
.chip { padding: 0.25rem 0.8rem; background: #ccfbf1; }
</style>
<p class="chip">ok</p>