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;
<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>
sd
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: .5em;
padding: .5em;
background-color: #FFF;
overflow: hidden;
text-align: left;
font-style: italic;
}
p {
font-size: 1rem;
font-style: normal;
background: #E4F0F5;
padding: .5em;
margin: .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; }
預設值 | auto |
---|---|
Applies to | all elements but non-replaced inline elements, table rows, and row groups |
繼承與否 | 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(); |
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-available
inline size orfill-available
block 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
auto | <length> | <percentage> | min-content | max-content | fit-content(<length-percentage>)where
<length-percentage> = <length> | <percentage>
範例
預設寬度
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 | Status | Comment |
---|---|---|
CSS Basic Box Model The definition of 'width' in that specification. |
Working Draft | Added the max-content , min-content , available , fit-content , border-box , content-box keywords. |
CSS Transitions The definition of 'width' in that specification. |
Working Draft | Lists width as animatable. |
CSS Level 2 (Revision 1) The definition of 'width' in that specification. |
Recommendation | Precises on which element it applies to. |
CSS Level 1 The definition of 'width' in that specification. |
Recommendation | Initial definition. |
CSS Box Sizing Module Level 3 The definition of 'width' in that specification. |
Working Draft | Adds new sizing keywords for width and height. |
瀏覽器相容性
BCD tables only load in the browser
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.