width

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

Thuộc tính width của CSS đặt chiều rộng của một phần tử. Theo mặc định, nó đặt chiều rộng của vùng nội dung, nhưng nếu box-sizing được đặt thành border-box, nó đặt chiều rộng của vùng viền.

Try it

width: 150px;

width: 20em;

width: 75%;

width: auto;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    This is a box where you can change the width.
  </div>
</section>

#example-element {
  display: flex;
  flex-direction: column;
  background-color: #5b6dcd;
  height: 80%;
  justify-content: center;
  color: white;
}

Giá trị được chỉ định của width áp dụng cho vùng nội dung miễn là giá trị của nó nằm trong phạm vi được xác định bởi min-width và max-width.

Nếu giá trị width nhỏ hơn giá trị min-width, thì min-width ghi đè width.
Nếu giá trị width lớn hơn giá trị max-width, thì max-width ghi đè width.

Note: Là thuộc tính hình học, width cũng áp dụng cho các phần tử SVG <svg>, <rect>, <image>, và <foreignObject>, với auto giải thành 100% cho <svg> và 0 cho các phần tử khác, và các giá trị phần trăm tương đối với chiều rộng khung nhìn SVG cho <rect>. Giá trị thuộc tính CSS width ghi đè bất kỳ giá trị thuộc tính SVG width nào được đặt trên phần tử SVG.

Cú pháp

css

/* Giá trị <length> */
width: 300px;
width: 25em;

/* Giá trị <percentage> */
width: 75%;

/* Giá trị từ khóa */
width: max-content;
width: min-content;
width: fit-content;
width: auto;
width: stretch;

/* Giá trị hàm */
width: fit-content(20em);
width: anchor-size(width);
width: anchor-size(--my-anchor inline, 120%);
width: calc-size(max-content, size / 2);

/* Giá trị toàn cục */
width: inherit;
width: initial;
width: revert;
width: revert-layer;
width: unset;

Giá trị

<length>: Xác định chiều rộng bằng giá trị khoảng cách.
<percentage>: Xác định chiều rộng bằng phần trăm chiều rộng của khối chứa.
auto: Trình duyệt sẽ tính toán và chọn chiều rộng cho phần tử được chỉ định.
max-content: Chiều rộng ưa thích nội tại.
min-content: Chiều rộng tối thiểu nội tại.
fit-content: Sử dụng không gian có sẵn, nhưng không nhiều hơn max-content, tức là min(max-content, max(min-content, stretch)).
anchor-size(): Đặt chiều rộng tương đối với kích thước của phần tử neo. Khi xác định width của phần tử được định vị theo neo, tham số đầu tiên mặc định là chiều rộng của neo liên kết. Nếu áp dụng cho phần tử không được định vị theo neo, nó đặt chiều rộng thành giá trị dự phòng. Nếu không có giá trị dự phòng nào được xác định, khai báo bị bỏ qua.
calc-size(): Đặt chiều rộng thành kích thước nội tại đã được sửa đổi.
fit-content(<length-percentage>): Sử dụng công thức fit-content với không gian có sẵn được thay thế bằng đối số được chỉ định, kẹp chiều rộng theo công thức min(kích thước tối đa, max(kích thước tối thiểu, <length-percentage>)).
stretch: Đặt chiều rộng của hộp lề của phần tử bằng chiều rộng của khối chứa. Nó cố gắng làm cho hộp lề lấp đầy không gian có sẵn trong khối chứa, do đó hoạt động tương tự như 100% theo một cách nào đó, nhưng áp dụng kích thước kết quả cho hộp lề thay vì hộp được xác định bởi box-sizing.

Khả năng tiếp cận

Đảm bảo rằng các phần tử được đặt với width không bị cắt bớt và/hoặc không che khuất nội dung khác khi trang được phóng to để tăng kích thước chữ.

Định nghĩa chính thức

Initial value	`auto`
Applies to	all elements but non-replaced inline elements, table rows, and row groups
Inherited	no
Percentages	refer to the width of the containing block
Computed value	a percentage or `auto` or the absolute length
Animation type	a length, percentage or calc();

Cú pháp chính thức

width = 
  auto                                      |
  <length-percentage [0,∞]>                 |
  min-content                               |
  max-content                               |
  fit-content( <length-percentage [0,∞]> )  |
  <calc-size()>                             |
  <anchor-size()>                           |
  stretch                                   |
  fit-content                               |
  contain                                   

<length-percentage> = 
  <length>      |
  <percentage>  

<calc-size()> = 
  calc-size( <calc-size-basis> , <calc-sum> )  

<anchor-size()> = 
  anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )  

<calc-size-basis> = 
  <size-keyword>  |
  <calc-size()>   |
  any             |
  <calc-sum>      

<calc-sum> = 
  <calc-product> [ [ '+' | '-' ] <calc-product> ]*  

<anchor-name> = 
  <dashed-ident>  

<anchor-size> = 
  width        |
  height       |
  block        |
  inline       |
  self-block   |
  self-inline  

<calc-product> = 
  <calc-value> [ [ '*' | / ] <calc-value> ]*  

<calc-value> = 
  <number>        |
  <dimension>     |
  <percentage>    |
  <calc-keyword>  |
  ( <calc-sum> )  

<calc-keyword> = 
  e          |
  pi         |
  infinity   |
  -infinity  |
  NaN

Ví dụ

Chiều rộng mặc định

Ví dụ này minh họa cách dùng cơ bản và giá trị mặc định auto.

HTML

Chúng ta bao gồm hai đoạn văn; một đoạn có tên lớp.

html

<p>Cộng đồng MDN viết tài liệu thực sự tuyệt vời.</p>
<p class="has-width">Cộng đồng MDN viết tài liệu thực sự tuyệt vời.</p>

CSS

Chúng ta đặt nền vàng cho tất cả các đoạn văn, đặt rõ ràng width của đoạn thứ hai thành auto.

css

p {
  background: gold;
}
p.has-width {
  width: auto;
}

Kết quả

Vì width mặc định là auto, cả hai đoạn có cùng chiều rộng.

Sử dụng đơn vị độ dài

Ví dụ này minh họa các giá trị chiều rộng theo độ dài.

HTML

Chúng ta bao gồm hai phần tử <div> với một số văn bản.

html

<div class="px_length">Chiều rộng tính bằng px</div>
<div class="em_length">Chiều rộng tính bằng em</div>

CSS

Phần tử px_length được đặt thành 200px trong khi phần tử em_length được đặt rộng 20em. Cả hai phần tử cũng có các giá trị background-color, color, và border khác nhau để phân biệt chúng khi hiển thị.

css

.px_length {
  width: 200px;

  background-color: red;
  color: white;
  border: 1px solid black;
}

.em_length {
  width: 20em;

  background-color: white;
  color: red;
  border: 1px solid black;
}

Kết quả

Phần tử px_length luôn rộng 200px. Chiều rộng hiển thị của phần tử em_length phụ thuộc vào kích thước phông chữ.

Sử dụng phần trăm

Ví dụ này minh họa cách dùng các giá trị phần trăm.

HTML

Chúng ta bao gồm một phần tử <div> với một số văn bản.

html

<div class="percent">Chiều rộng theo phần trăm</div>

CSS

Chúng ta đặt width của phần tử thành 20% chiều rộng của bộ chứa cha.

css

.percent {
  width: 20%;

  background-color: silver;
  border: 1px solid red;
}

Kết quả

Sử dụng kích thước nội tại

Ví dụ này so sánh max-content và min-content, và giới thiệu calc-size.

HTML

Chúng ta bao gồm ba đoạn văn với cùng nội dung; chỉ khác tên lớp.

html

<p class="max-green">Cộng đồng MDN viết tài liệu thực sự tuyệt vời.</p>
<p class="min-blue">Cộng đồng MDN viết tài liệu thực sự tuyệt vời.</p>
<p class="min-pink">Cộng đồng MDN viết tài liệu thực sự tuyệt vời.</p>

CSS

Chúng ta đặt width của một đoạn thành max-content, đoạn thứ hai thành min-content, và đoạn thứ ba gấp đôi kích thước min-content bằng hàm calc-size(). Mỗi đoạn được tô màu nền và kiểu viền khác nhau.

css

p.max-green {
  width: max-content;

  background-color: lightgreen;
  border-style: dotted;
}

p.min-blue {
  width: min-content;

  background-color: lightblue;
  border-style: dashed;
}

p.min-pink {
  width: calc-size(min-content, size * 2);

  background-color: pink;
  border-style: solid;
}

@supports not (width: calc-size(min-content, size * 2)) {
  body::after {
    content: "Your browser doesn't support the calc-size() function yet.";
    background-color: wheat;
    display: block;
    text-align: center;
    padding: 1em;
  }
}

Kết quả

Ví dụ max-content rộng bằng văn bản. Ví dụ min-content rộng bằng từ dài nhất. Ví dụ calc-size() được đặt gấp đôi chiều rộng min-content.

Sử dụng từ khóa stretch

Ví dụ này minh họa giá trị stretch trong bộ chứa flex.

HTML

Chúng ta bao gồm một bộ chứa cha với hai phần tử con.

html

<div class="parent">
  <div class="child">text</div>
  <div class="child stretch">stretch</div>
</div>

CSS

Chúng ta dùng thuộc tính display để biến cha thành bộ chứa flex, và đặt width của phần tử con thứ hai thành stretch.

css

.parent {
  border: solid;
  margin: 1rem;
  display: flex;
}

.child {
  background: #00999999;
  margin: 1rem;
}

.stretch {
  width: stretch;
}

@supports not (width: stretch) {
  body::after {
    content: "Your browser doesn't support the stretch value yet.";
    background-color: wheat;
    display: block;
    text-align: center;
    padding: 1em;
  }
}

Kết quả

Theo mặc định, các phần tử flex rộng bằng nội dung của chúng. Giá trị stretch làm cho phần tử rộng bằng không gian có sẵn cho phép, với hộp lề của phần tử bị kẹp theo chiều rộng của khối chứa.

Sử dụng hàm anchor-size()

Ví dụ này minh họa cách dùng hàm anchor-size() để xác định chiều rộng của phần tử được định vị theo neo; chúng ta xác định chiều rộng của nó như một bội số chiều cao của neo.

HTML

Chúng ta chỉ định hai phần tử <div>: một phần tử anchor và một phần tử infobox mà chúng ta sẽ định vị tương đối với neo.

html

<div class="anchor">⚓︎</div>

<div class="infobox">
  <p>Hộp thông tin.</p>
</div>

CSS

Chúng ta khai báo phần tử anchor <div> là phần tử neo bằng cách đặt cho nó anchor-name. Phần tử được định vị có thuộc tính position được đặt thành absolute, và được liên kết với phần tử neo qua thuộc tính position-anchor. Chúng ta cũng đặt kích thước height và width tuyệt đối trên neo và xác định chiều rộng của phần tử được định vị theo neo bằng chiều rộng của neo sử dụng hàm anchor-size() làm giá trị của thuộc tính width.

.anchor {
  anchor-name: --my-anchor;
  width: 120px;
  height: 60px;

  font-size: 2rem;
  background-color: lightpink;
  text-align: center;
  align-content: center;
  outline: 1px solid black;
}

.infobox {
  position-anchor: --my-anchor;
  position: absolute;
  position-area: right;
  width: anchor-size(width);

  left: calc( anchor-size(height) / 4 )

  align-content: center;
  color: darkblue;
  background-color: azure;
  outline: 1px solid #dddddd;
}

body {
  padding: 5em;
}

Kết quả

Lưu ý cách chiều rộng của hộp thông tin luôn bằng chiều rộng của phần tử neo.

Thông số kỹ thuật

Specification
CSS Box Sizing Module Level 4 # sizing-values

Khả năng tương thích trình duyệt

Xem thêm

Help improve MDN

Learn how to contribute

This page was last modified on Jan 1, 1970 by MDN contributors.

View this page on GitHub • Report a problem with this content