Hộp và khoảng cách · Lập trình với Martin

Khám phá bí mật lớn nhất trong CSS: mọi thứ trên trang đều là hộp. Và học cách di chuyển chúng.

Xem này: mọi thứ đều là hộp

Đây là bí mật lớn nhất trong thiết kế web: mọi thứ trên trang đều là hộp chữ nhật. Tiêu đề, đoạn văn, ảnh, menu – tất cả. Khi bạn học nhìn thấy điều đó, toàn bộ CSS sẽ rõ ràng.

Mỗi hộp có ba loại khoảng cách xung quanh:

        margin (outer space)
      ┌─────────────────────────┐
      │  border (frame)         │
      │  ┌───────────────────┐  │
      │  │ padding (cushion) │  │
      │  │  ┌─────────────┐  │  │
      │  │  │   CONTENT   │  │  │
      │  │  └─────────────┘  │  │
      │  └───────────────────┘  │
      └─────────────────────────┘

padding – đệm: khoảng cách giữa nội dung và khung (bên trong hộp)
border – khung hộp
margin – khoảng cách giữa hộp và hàng xóm (bên ngoài hộp)

.card {
  padding: 16px;        /* cushion on all sides */
  border: 2px solid gray;
  margin: 20px 0;       /* 20px top and bottom, 0 on the sides */
  border-radius: 12px;
}

Xem này: trang như chuyên gia xây

Bạn đã thấy trên website thật – nội dung không trải hết màn hình rộng, mà nằm gọn trong cột giữa. Ba dòng CSS làm điều đó:

main {
  max-width: 700px;   /* content will never be wider than 700px */
  margin: 0 auto;     /* auto on the sides = center it */
  padding: 0 16px;     /* on mobile, text won't be glued to the edge */
}

margin: 0 auto là công thức ma thuật: không trên dưới, “tự động bằng nhau” hai bên – tức căn giữa. Hầu hết website trên thế giới dùng quy tắc này.

Và hãy thuần hóa ảnh, để chúng không tràn ra ngoài trang:

img {
  max-width: 100%;      /* never wider than the column */
  height: auto;         /* height adjusts automatically, so the photo doesn't squish */
  border-radius: 12px;  /* rounded corners suit every photo */
}

Lượt của bạn 💪

Nhiệm vụ này giống nhau mọi dự án – trang phục phổ quát cho mọi website:

Căn giữa nội dung: quy tắc max-width + margin: 0 auto trên main.
Thuần hóa ảnh bằng quy tắc img từ ví dụ.
Cải thiện huy hiệu bài trước: thêm margin để có không gian thở.
Cho trang thoáng: thêm body { line-height: 1.6; } – dòng chữ giãn đẹp.

Giải pháp đầy đủ (dùng được mọi dự án)

Thêm vào style.css:

body {
  line-height: 1.6;
}

main {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 16px;
}

img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

Và vào huy hiệu của bạn (có thể tên .news, .favorite, .tip, hoặc .win), thêm dòng:

  margin: 20px 0;

💡

Thử làm hộp hiện ra! Thêm quy tắc này vào CSS một lúc: * { border: 1px solid red; } – dấu sao nghĩa là “mọi thứ”. Đột nhiên bạn thấy mọi hộp trên trang. Rồi xóa đi, nhưng nhớ cảnh đó: trình duyệt nhìn trang của bạn như vậy.

✅

Tự kiểm tra: Nội dung nằm gọn cột giữa, ảnh bo góc và không tràn, chữ dễ đọc. Thu nhỏ cửa sổ trình duyệt – nội dung tự điều chỉnh. Website đột nhiên trông cao cấp hơn một bậc.

Điều cần nhớ từ bài này

Mọi thứ trên trang là hộp với padding (bên trong), border (khung), và margin (bên ngoài).
max-width + margin: 0 auto = cột nội dung căn giữa, như website thật.
img { max-width: 100%; } – ảnh không bao giờ tràn ra.