Vlastnost šířky CSS
Příklad
Nastavte šířku tří prvků <div>:
div.a {
width: auto;
border: 1px
solid black;
}
div.b {
width: 150px;
border: 1px solid black;
}
div.c {
width:
50%;
border: 1px solid black;
}
Další příklady „Vyzkoušejte si to sami“ níže.
Definice a použití
Vlastnost widthnastavuje šířku prvku.
Šířka prvku nezahrnuje výplň, okraje nebo okraje!
Poznámka: Vlastnosti min-width a
max-width mají přednost před width
vlastnostmi.
| Výchozí hodnota: | auto |
|---|---|
| Zděděno: | Ne |
| Animovatelné: | Ano. Přečtěte si o tématu Animable |
| Verze: | CSS1 |
| Syntaxe JavaScriptu: | objekt .style.width="500px" |
Podpora prohlížeče
Čísla v tabulce určují první verzi prohlížeče, která plně podporuje vlastnost.
| Property | |||||
|---|---|---|---|---|---|
| width | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Syntaxe CSS
width: auto|value|initial|inherit;
Hodnoty vlastností
| Value | Description | Play it |
|---|---|---|
| auto | Default value. The browser calculates the width | |
| length | Defines the width in px, cm, etc. Read about length units | |
| % | Defines the width in percent of the containing block | |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
Další příklady
Příklad
Nastavte šířku prvku <img> pomocí procentuální hodnoty:
img {
width: 50%;
}
Příklad
Nastavte šířku prvku <input type="text"> na 100 pixelů. Když se však zaostří, nastavte jej na šířku 250 pixelů:
input[type=text] {
width: 100px;
}
input[type=text]:focus {
width: 250px;
}
Související stránky
CSS tutoriál: CSS Výška a šířka
CSS tutoriál: CSS Box model
CSS reference: vlastnost height
HTML odkaz DOM: vlastnost width