CSS-da elementlarning eni va bo'yini o'rnatish uchun width va height xususiyatlari mo'ljallangan. Ushbu xususiyatlarning qiymatlari odatda piksellarda o'rnatiladi. Piksellar px deb belgilanadi va raqamga qo'shiladi. Masalan, o'lchamni 100 pikselga o'rnatish uchun quyidagi qiymatlarni ko'rsatish kerak: 100px.
Keling, ushbu xususiyatlarning ishini bir misolda ko'rib chiqaylik. Bir nechta jadval katakchalarini kengligi 200px va balandligi 100px ga o'rnatamiz.
<table border="1">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
td {
width: 200px;
height: 100px;
}
HTML kodingizda uzun matnli paragraflar yarating. CSS-dan foydalanib, barcha paragraflarga 300px kengligi bering.
Quyidagi jadval berilgan:
<table border="1">
<tr>
<td>John</td>
<td>Smith</td>
<td>200$</td>
</tr>
<tr>
<td>Nick</td>
<td>Mayers</td>
<td>300$</td>
</tr>
<tr>
<td>Alex</td>
<td>Jonson</td>
<td>400$</td>
</tr>
</table>Ushbu jadvalning katakchalarining kengligini 400px va balandligini 300px ga o'rnating.