Esempi-di-proprietà-width-in-CSS

Esempi di proprietà CSS width

Larghezza auto (adatta al contenuto e allo spazio disponibile)

Larghezza fissa di 150px

Larghezza del 60% del contenitore

Larghezza del 70% della viewport

Larghezza di 10em (relativo alla dimensione del font)

Larghezza adattata al contenuto con fit-content

Codice

<style>
.auto {
width: auto;
background-color: #ADD8E6;
padding: 10px;
margin-bottom: 10px;
}
.px {
width: 150px;
background-color: #90EE90;
padding: 10px;
}
.percent {
width: 60%;
background-color: #FFB6C1;
padding: 10px;
}
.vw {
width: 70vw;
background-color: #FFA07A;
padding: 10px;
}
.em {
font-size: 20px;
width: 10em;
background-color: #D8BFD8;
padding: 10px;
}
.fit {
width: fit-content(200px);
background-color: #F0E68C;
padding: 10px;
}
</style>
</head>
<body>

<h2>Esempi di proprietà CSS width</h2>

<div class="auto">Larghezza auto (adatta al contenuto e allo spazio disponibile)</div>
<div class="px">Larghezza fissa di 150px</div>
<div class="percent">Larghezza del 60% del contenitore</div>
<div class="vw">Larghezza del 70% della viewport</div>
<div class="em">Larghezza di 10em (relativo alla dimensione del font)</div>
<div class="fit">Larghezza adattata al contenuto con fit-content</div>