CSS Borders & Padding Demo

1. Borders

Borders are like a frame around content. You can control thickness, style, and color.

2. Block vs Inline

Block elements stretch across the page. Inline elements only take up the space of their text.

Here’s an inline span with a dotted border inside a sentence.

3. Borders on One Side

You can put a border just on one side (top, right, bottom, left).

Border only on top

Border only on right

Border only on bottom

Border only on left

4. Padding

Padding is the space inside the border, between the text and the border.

5. Key Takeaway

• Borders = the outside frame
• Padding = space inside the frame
• Block vs inline = how much space the element takes up