Tài liệu CSS chạy trực tiếp: Width và height

Q: width: 100% và width: auto khác nhau thế nào?

Với phần tử block, auto lấp đầy khung chứa, tính cả padding và viền. width: 100% đặt chiều rộng phần nội dung bằng chiều rộng khung chứa, nên với box-sizing: content-box mặc định, chỉ cần có padding hay viền là phần tử bị tràn ra ngoài.

Q: width và max-width khác nhau thế nào?

width đặt một kích thước chính xác. max-width đặt giới hạn trên: phần tử có thể hẹp hơn, ví dụ trên điện thoại, nhưng không bao giờ rộng hơn. width: 100%; max-width: 600px; lấp đầy màn hình nhỏ và dừng ở 600px trên màn hình lớn.

Q: Làm sao để phần tử cao bằng toàn màn hình?

Dùng min-height: 100vh (hoặc 100dvh để tính đến thanh công cụ của trình duyệt di động). Dùng min-height thay vì height để khu vực đó cao lên được nếu nội dung cao hơn màn hình.

Width và height trong CSS: min, max, % và auto

width và height đặt kích thước khung của một phần tử. Tìm hiểu kích thước cố định và phần trăm, vì sao height: 100% thường không có tác dụng, min-height và max-width cho bố cục linh hoạt, auto và 100%, cùng các từ khóa fit-content.

Trang này có trình soạn thảo chạy trực tiếp. Sửa, chạy và xem đầu ra ngay lập tức.

Bởi Kevin Spektor, Đồng sáng lập và CTO

Đăng ngày Sep 24, 2026

Đặt width và height

width và height đặt kích thước của khung nội dung (content box) của phần tử. Mặc định, padding và viền được cộng thêm bên ngoài kích thước đó.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Width and height</title>
  <style>
    .box {
      width: 240px;
      height: 80px;
      background: #2563eb;
      color: white;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="box" id="box"></div>
  <script>
    const box = document.getElementById('box');
    box.textContent = 'width 240px + padding = ' + box.offsetWidth + ' x ' + box.offsetHeight + 'px';
  </script>
</body>
</html>

Hộp có kích thước 260 x 100 pixel: 240 x 80 cho nội dung cộng 10px padding mỗi phía. Với box-sizing: border-box, nó sẽ đúng 240 x 80; trang box model giải thích cả hai cách.

Các giá trị

Giá trị	Ví dụ	Ý nghĩa
`auto`	`width: auto`	Mặc định. Phần tử block lấp đầy chiều rộng khung chứa; chiều cao vừa với nội dung
Độ dài	`300px`, `20rem`	Kích thước cố định
Phần trăm	`50%`	Của chiều rộng (với `width`) hoặc chiều cao (với `height`) của khối chứa
Đơn vị viewport	`100vh`, `50vw`, `100dvh`	Của cửa sổ trình duyệt
`min-content`	`width: min-content`	Hẹp nhất có thể, từ dài nhất quyết định
`max-content`	`width: max-content`	Rộng bằng nội dung khi nằm trên một dòng
`fit-content`	`width: fit-content`	Giống `max-content`, nhưng không bao giờ rộng hơn khung chứa

Vì sao height: 100% không có tác dụng

height phần trăm cần một phần tử cha có chiều cao xác định để tính phần trăm. Khi chiều cao của phần tử cha là auto, vốn là trường hợp thông thường, height: 100% của phần tử con cũng hoạt động như auto.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>height 100%</title>
  <style>
    .parent { background: #e5e7eb; padding: 6px; margin-bottom: 12px; display: flow-root; }
    .fixed { height: 120px; }
    .child { height: 100%; background: #f59e0b; }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child">Parent height auto: 100% is ignored</div>
  </div>
  <div class="parent fixed">
    <div class="child">Parent height 120px: 100% works</div>
  </div>
</body>
</html>

Phần tử con đầu tiên chỉ cao bằng phần chữ của nó. Phần tử con thứ hai lấp đầy phần tử cha vì phần tử cha có chiều cao. Muốn cả chuỗi phần trăm trên trang hoạt động, mọi phần tử tổ tiên tới tận html và body đều cần có chiều cao, nên phần lớn bố cục dùng flexbox hoặc grid thay thế: phần tử con của chúng tự kéo giãn để lấp đầy mà không cần phần trăm nào.

min-height và max-width: kích thước linh hoạt

Kích thước cố định rất dễ vỡ: chiều cao cố định bị tràn khi chữ dài hơn dự kiến, còn chiều rộng cố định thì quá rộng cho điện thoại. Các thuộc tính min- và max- đặt giới hạn thay vì kích thước chính xác.

Thuộc tính	Ý nghĩa
`min-width`	Không bao giờ hẹp hơn giá trị này
`max-width`	Không bao giờ rộng hơn giá trị này
`min-height`	Không bao giờ thấp hơn giá trị này, nhưng có thể cao lên
`max-height`	Không bao giờ cao hơn giá trị này (nội dung thừa sẽ bị tràn)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>min and max</title>
  <style>
    .card {
      max-width: 360px;   /* narrower on small screens, never wider */
      min-height: 50px;   /* at least 50px, grows with content */
      border: 2px solid #2563eb;
      padding: 10px;
      margin-bottom: 12px;
    }
    .fixed {
      max-width: 360px;
      height: 50px;       /* fixed: long text spills out */
      border: 2px solid #f59e0b;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="card">Short card: the 50px minimum.</div>
  <div class="card">A card with much more text. It keeps its 360px limit but grows taller, because min-height sets a floor, not a fixed size. The border stays around all of the text, however many lines there are. Add another sentence here and the card simply gets taller again.</div>
  <div class="fixed">A fixed height of 50px with long text. The text no longer fits, so it spills past the amber border and over whatever comes next on the page. A fixed height cannot know how long the text will be, or how large the reader has set the font.</div>
</body>
</html>

Trên màn hình hẹp hơn 360px, như điện thoại, các card co lại theo, vì max-width chỉ là mức trần.

Khi cả kích thước lẫn giới hạn cùng áp dụng, giới hạn thắng: max-width thắng width, và min-width thắng max-width.

width: auto và width: 100%

Với phần tử block, để width ở auto gần như luôn là điều bạn muốn. auto đưa cả khung, gồm padding và viền, vừa vào khung chứa. 100% làm phần nội dung rộng bằng khung chứa rồi cộng thêm padding và viền lên trên:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>auto vs 100%</title>
  <style>
    .container { width: 300px; background: #e5e7eb; padding: 8px 0; }
    .item { padding: 10px; border: 3px solid #2563eb; margin: 6px 0; }
    .auto { width: auto; }
    .full { width: 100%; }
  </style>
</head>
<body>
  <div class="container">
    <div class="item auto">width: auto, fits</div>
    <div class="item full">width: 100%, overflows</div>
  </div>
  <p id="out"></p>
  <script>
    const w = (s) => document.querySelector(s).offsetWidth;
    document.getElementById('out').textContent =
      'container 300px, auto ' + w('.auto') + 'px, 100% ' + w('.full') + 'px';
  </script>
</body>
</html>

width: 100% vẫn hữu ích cho các phần tử mặc định không phải block (một <input>, một <img>, một phần tử inline-block), tốt nhất là đi kèm box-sizing: border-box.

Kích thước theo nội dung: fit-content

Để một phần tử block chỉ rộng bằng phần chữ của nó mà không cần chuyển sang inline-block, hãy dùng fit-content:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>fit-content</title>
  <style>
    div { background: #16a34a; color: white; padding: 6px 10px; margin-bottom: 8px; }
    .fit { width: fit-content; }
    .min { width: min-content; }
  </style>
</head>
<body>
  <div>auto: full width</div>
  <div class="fit">fit-content: as wide as the text</div>
  <div class="min">min-content: one word per line</div>
</body>
</html>

fit-content cùng margin-inline: auto căn giữa một nhãn hoặc một khối trông như nút mà vẫn rộng đúng bằng phần chữ.

Khu vực cao toàn màn hình và đơn vị viewport

vh là 1% chiều cao viewport và vw là 1% chiều rộng. Trên điện thoại, thanh địa chỉ của trình duyệt to ra và thu nhỏ lại khi bạn cuộn, nên 100vh có thể cao hơn phần bạn nhìn thấy. Đơn vị động dvh bám theo vùng nhìn thấy, còn svh dùng chiều cao nhìn thấy nhỏ nhất:

.hero {
  min-height: 100vh;  /* fallback */
  min-height: 100dvh; /* follows mobile toolbars */
}

Dùng min-height, không phải height, cho các khu vực toàn màn hình, để màn hình nhỏ có nhiều chữ vẫn có một khu vực cao lên được. Chiều cao cố định với nội dung không vừa sẽ bị tràn ra ngoài, và đó là việc của trang CSS overflow.

Lỗi thường gặp

height: 100% trong phần tử cha không có chiều cao. Nó hoạt động như auto. Hãy đặt chiều cao cho phần tử cha hoặc dùng flex hay grid.
width: 100% cộng thêm padding. Phần tử bị tràn khỏi khung chứa. Để chiều rộng của block ở auto, hoặc dùng box-sizing: border-box.
Chiều cao cố định cho khung chứa chữ. Dùng min-height để chữ dài hơn hay font to hơn không bị tràn ra.
width trên phần tử inline. <span> và <a> bỏ qua width và height; hãy cho chúng inline-block hoặc block.
width: 1200px cho lớp bọc trang. Nó bị cuộn ngang trên mọi điện thoại. Hãy dùng max-width: 1200px.

Câu hỏi thường gặp

Vì sao height: 100% không hoạt động?

Chiều cao phần trăm là phần trăm chiều cao của phần tử cha, và chỉ hoạt động khi chiều cao đó xác định. Nếu chiều cao của phần tử cha là auto (tính theo nội dung), phần trăm được coi như auto. Hãy đặt chiều cao cho phần tử cha, hoặc dùng flexbox hay grid, vốn kéo giãn phần tử con mà không cần phần trăm.

width: 100% và width: auto khác nhau thế nào?

Với phần tử block, auto lấp đầy khung chứa, tính cả padding và viền. width: 100% đặt chiều rộng phần nội dung bằng chiều rộng khung chứa, nên với box-sizing: content-box mặc định, chỉ cần có padding hay viền là phần tử bị tràn ra ngoài.

min-height trong CSS dùng để làm gì?

Nó đặt chiều cao nhỏ nhất mà phần tử được phép có, nhưng vẫn cho phần tử cao lên theo nội dung. min-height: 200px cho card trống cao 200px, còn card nhiều chữ hơn sẽ cao lên thay vì bị tràn, điều mà height cố định không cho phép.

width và max-width khác nhau thế nào?

width đặt một kích thước chính xác. max-width đặt giới hạn trên: phần tử có thể hẹp hơn, ví dụ trên điện thoại, nhưng không bao giờ rộng hơn. width: 100%; max-width: 600px; lấp đầy màn hình nhỏ và dừng ở 600px trên màn hình lớn.

Làm sao để phần tử cao bằng toàn màn hình?

Dùng min-height: 100vh (hoặc 100dvh để tính đến thanh công cụ của trình duyệt di động). Dùng min-height thay vì height để khu vực đó cao lên được nếu nội dung cao hơn màn hình.

Khái niệm liên quan