Interactive Lesson: margin, padding, border

This lesson is focused on practice.

You already learned that every element is a box. Now you will change the space inside the box, the space outside the box, and the line around the box.

What you will practice

• margin creates space outside the element.
• padding creates space inside the element.
• border draws a line around the padding and content.
• border-radius rounds the corners of the box.
• border-style changes the type of line.

Try the interactive playground

Use the number inputs to change pixel values. Use the dropdown to try each border style.

Watch the preview box and the CSS code below it. Each control changes one CSS declaration.

.preview-box {
  margin: 24px;
  padding: 24px;
  border: 4px solid #2563eb;
  border-radius: 12px;
}