178 of 313 menu

Box-sizing хусусияти

box-sizing хусусияти элемент ўлчамларини хисоблаш усулини ўзгартириш имконини беради.

Стандарт холда padding қўшиш элементни кентайтиради: агар биз энни width 100px ва padding-left ни 20px қилсак, элементнинг ҳақиқий эни 120px бўлади.

Агар биз яна border-left ни 10px қилсак, элементнинг ҳақиқий эни 130px бўлади. Яъни padding ва border блокни кентайтиради (ва эн, ва бўй бўйича). Бу ҳаракатни box-sizing ёрдамида ўзгартириш мумкин.

Синтаксис

селектор { box-sizing: content-box | border-box; }

Қийматлар

Қиймат Тасниф
content-box padding ҳам, border ҳам блокни кентайтиради.
border-box padding ҳам, border ҳам блокни кентайтмайди.

Стандарт қиймат: content-box.

Мисол . Стандарт харакат

Ҳозирда ҳар икки блокнинг бўйи ва эни бир хил, бирок иккинчи блокда padding берилган, биринчисида эсa - йўқ. Уларнинг ўлчамлари қандай фарқ қиланини кўринг:

<div id="elem1">elem1</div> <div id="elem2">elem2</div> #elem1 { width: 300px; height: 100px; margin-bottom: 10px; background: #f1f1f1; } #elem2 { padding: 50px; width: 300px; height: 100px; background: #f1f1f1; }

:

Мисол . Стандарт харакат

Ҳозирда ҳар икки блокнинг бўйи ва эни бир хил, бирок иккинчи блокда 10px чегара берилган, биринчисида эсa - йўқ. Уларнинг ўлчамлари қандай фарқ қиланини кўринг:

<div id="elem1">elem1</div> <div id="elem2">elem2</div> #elem1 { width: 300px; height: 100px; background: #f1f1f1; } #elem2 { border: 10px solid black; width: 300px; height: 100px; background: #f1f1f1; }

:

Мисол . Стандарт харакат

Ҳозирда иккинчи блокда ҳам padding, ҳам 10px чегара мавжуд:

<div id="elem1">elem1</div> <div id="elem2">elem2</div> #elem1 { width: 300px; height: 100px; background: #f1f1f1; } #elem2 { padding: 50px; border: 20px solid black; width: 300px; height: 100px; background: #f1f1f1; }

:

Мисол . Border-box қиймати

Иккинчи элементга box-sizing хусусияти учун border-box қийматини қўшайлик. Энди ҳар икки элементнинг ўлчамлари бир хил бўлади:

<div id="elem1">elem1</div> <div id="elem2">elem2</div> #elem1 { width: 300px; height: 100px; background: #f1f1f1; } #elem2 { box-sizing: border-box; padding: 50px; border: 10px solid black; width: 300px; height: 100px; background: #f1f1f1; }

:

Шунингдек кўринг

  • outline хусусияти,
    элементни кентайтмайдиган чегара яратади
Ўзбек
AfrikaansAzərbaycanБългарскиবাংলাБеларускаяČeštinaDanskDeutschΕλληνικάEnglishEspañolEestiSuomiFrançaisहिन्दीMagyarՀայերենIndonesiaItaliano日本語ქართულიҚазақ한국어КыргызчаLietuviųLatviešuМакедонскиMelayuမြန်မာNederlandsNorskPolskiPortuguêsRomânăРусскийසිංහලSlovenčinaSlovenščinaShqipСрпскиSrpskiSvenskaKiswahiliТоҷикӣไทยTürkmenTürkçeOʻzbekTiếng Việt
Биз веб-сайт ишлаши, таҳлил қилиш ва персоналлаштириш учун кукидан фойдаланамиз. Маълумотларни қайта ишлаш Махфийлик сиёсатига мувофиқ амалга оширилади.
ҳаммасини қабул қилиш мослаштириш рад этиш