此頁面由社群從英文翻譯而來。了解更多並加入 MDN Web Docs 社群。
width
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
* Some parts of this feature may have varying levels of support.
The width CSS property specifies the width of an element. By default, the property defines the width of the content area. If box-sizing is set to border-box, however, it instead determines the width of the border area.
/* <length> values */
width: 300px;
width: 25em;
/* <percentage> value */
width: 75%;
/* Keyword values */
width: 25em border-box;
width: 75% content-box;
width: max-content;
width: min-content;
width: available;
width: fit-content;
width: auto;
/* Global values */
width: inherit;
width: initial;
width: unset;
Examples
<div class="grid">
<div class="col">
<div class="cell">
<length> values
<p class="w1">width: 150px</p>
<p class="w2">width: 20em</p>
<p
class="w3 warning"
title="this feature is experimental and might not work in your browser">
width: 20em content-box
</p>
<p
class="w4 warning"
title="this feature is experimental and might not work in your browser">
width: 20em border-box
</p>
</div>
<div class="cell">
<percentage> values
<p class="w5">width: 75%</p>
<p
class="w6 warning"
title="this feature is experimental and might not work in your browser">
width: 75% content-box
</p>
<p
class="w7 warning"
title="this feature is experimental and might not work in your browser">
width: 75% border-box
</p>
</div>
<div class="cell">
Keyword values
<p>width: auto</p>
<p
class="w8 warning"
title="this feature is experimental and might not work in your browser">
width: max-content
</p>
<p
class="w9 warning"
title="this feature is experimental and might not work in your browser">
width: min-content
</p>
<p
class="w10 warning"
title="this feature is experimental and might not work in your browser">
width: available
</p>
<p
class="w11 warning"
title="this feature is experimental and might not work in your browser">
width: fit-content
</p>
</div>
</div>
</div>
html,
body {
height: 100%;
box-sizing: border-box;
}
.grid {
width: 100%;
height: 100%;
display: flex;
background: #eee;
font: 1em monospace;
}
.col {
display: flex;
flex: 1 auto;
flex-direction: column;
}
.cell {
margin: 0.5em;
padding: 0.5em;
background-color: #fff;
overflow: hidden;
text-align: left;
font-style: italic;
}
p {
font-size: 1rem;
font-style: normal;
background: #e4f0f5;
padding: 0.5em;
margin: 0.5em;
}
.warning {
background: #e4e4e4;
}
.warning:before {
content: "⚠️ ";
}
/* values */
.w1 {
width: 150px;
}
.w2 {
width: 20em;
}
.w3 {
width: 20em content-box;
}
.w4 {
width: 20em border-box;
}
/* value */
.w5 {
width: 75%;
}
.w6 {
width: 75% content-box;
}
.w7 {
width: 75% border-box;
}
/* Keyword values (mostly experimental) */
.w8 {
width: max-content;
}
.w9 {
width: min-content;
}
.w10 {
width: available;
}
.w11 {
width: fit-content;
}
Syntax
The width property is specified as either:
- one of the following keyword values:
available,min-content,max-content,fit-content,auto. - a
<length>or a<percentage>. This may optionally be followed by one of the following keywords:border-box,content-box.
Values
<length>-
Defines the width as an absolute value.
<percentage>-
Defines the width as a percentage of the containing block's width. If the width of the containing block depends on the width of the element, the resulting layout is undefined.
border-box-
If present, the preceding
<length>or<percentage>is applied to the element's border box. content-box-
If present, the preceding
<length>or<percentage>is applied to the element's content box. auto-
The browser will calculate and select a width for the specified element.
fill-
Use the
fill-availableinline size orfill-availableblock size, as appropriate to the writing mode. max-content-
The intrinsic preferred width.
min-content-
The intrinsic minimum width.
available-
The containing block width minus horizontal margin, border and padding.
fit-content-
The larger of: the intrinsic minimum width
- the smaller of the intrinsic preferred width and the available width
Formal syntax
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
範例
預設寬度
p.goldie {
background: gold;
}
<p class="goldie">The Mozilla community produces a lot of great software.</p>
像素和相對大小
.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;
}
<div class="px_length">Width measured in px</div>
<div class="em_length">Width measured in em</div>
百分比
.percent {
width: 20%;
background-color: silver;
border: 1px solid red;
}
<div class="percent">Width in percentage</div>
內容最大值
p.maxgreen {
background: lightgreen;
width: intrinsic; /* Safari/WebKit uses a non-standard name */
width: -moz-max-content; /* Firefox/Gecko */
width: -webkit-max-content; /* Chrome */
}
<p class="maxgreen">The Mozilla community produces a lot of great software.</p>
內容最小值
p.minblue {
background: lightblue;
width: -moz-min-content; /* Firefox */
width: -webkit-min-content; /* Chrome */
}
<p class="minblue">The Mozilla community produces a lot of great software.</p>
規範
| Specification |
|---|
| CSS Box Sizing Module Level 3 # propdef-width |
瀏覽器相容性
Enable JavaScript to view this browser compatibility table.