яБНИЯРБЮ АКНЙНБ
аКНВМШЕ ЩКЕЛЕМРШ (АКНЙХ РЕЙЯРЮ ХКХ box) ОНГБНКЪЧР НОЕПХПНБЮРЭ Я РЕЙЯРНЛ Б РЕПЛХМЮУ ОПЪЛНСЦНКЭМХЙНБ, ЙНРНПШЕ ЩРНР РЕЙЯР ГЮМХЛЮЕР. оПХ ЩРНЛ АКНЙ РЕЙЯРЮ ЯРЮМНБХРЯЪ ЩКЕЛЕМРНЛ ДХГЮИМЮ ЯРПЮМХЖШ Я РЕЛХ ФЕ ЯБНИЯРБЮЛХ, ВРН Х ЙЮПРХМЙЮ, РЮАКХЖЮ ХКХ ОПЪЛНСЦНКЭМЮЪ НАКЮЯРЭ ОПХКНФЕМХЪ.
аКНЙ РЕЙЯРЮ НАКЮДЮЕР ЯБНИЯРБЮЛХ: БШЯНРШ(height), ЬХПХМШ(width), ЦПЮМХЖШ(border), НРЯРСОЮ(margin), МЮАХБЙХ(padding), ОПНХГБНКЭМНЦН ПЮГЛЕЫЕМХЪ(float), СОПЮБКЕМХЪ НАРЕЙЮМХЕЛ(clear).
цПЮТХВЕЯЙХ ЯБНИЯРБЮ ЛНФМН ОПЕДЯРЮБХРЭ ЯКЕДСЧЫХЛ НАПЮГНЛ:
б ДЮММНЛ ОПХЛЕПЕ БМСРПХ НЙМЮ АПЮСГЕПЮ ПЮЯОНКНФЕМ АКНВМШИ ЩКЕЛЕМР(DIV), БМСРПЭ ЙНРНПНЦН ОНЛЕЫЕМ ЕЫЕ НДХМ АКНВМШИ ЩКЕЛЕМР(P). DIV ХЛЕЕР АЕКШИ ТНМ Х ЦПЮМХЖС. оЮПЮЦПЮТ ХЛЕЕР ЦПЮМХЖС Х ФЕКРШИ ТНМ.
я ЬХПХМНИ Х БШЯНРНИ АКНЙЮ РЕЙЯРЮ АНКЕЕ ХКХ ЛЕМЕЕ БЯЕ ОНМЪРМН. гЮДЮБЮРЭЯЪ НМХ ЛНЦСР Б РХОНЦПЮТЯЙХУ ОСМЙРЮУ(pt), ОХЙЯЕКЪУ(px) Х СЯКНБМШУ ЕДХМХЖЮУ(em):
<div style="width:200px;">ОХЙЯЕКХ</div>
<div style="width:200pt;">РХОНЦПЮТЯЙХЕ ОСМЙРШ</div>
<div style="width:5em;">СЯКНБМШЕ ЕДХМХЖШ</div>
я БШЯНРНИ АКНЙЮ РЕЙЯРЮ ЯКЕДСЕР АШРЭ НЯРНПНФМШЛ, Р.Й. Б ВЕРБЕПРНИ БЕПЯХХ NN ЛМНЦХЕ ХГ ЮРПХАСРНБ CSS МЕ ОНДДЕПФХБЮЧРЯЪ, Х БШЯНРЮ НАШВМНЦН АКНВМНЦН ЩКЕЛЕМРЮ - НДХМ ХГ МХУ.
пЮЯЯРНЪМХЕ НР ЦПЮМХЖШ АКНВМНЦН ЩКЕЛЕМРЮ ДН ЦПЮМХЖШ БКНФЕММНЦН Б МЕЦН АКНВМНЦН ЩКЕЛЕМРЮ МЮГШЮЕРЯЪ padding. б РЕПЛХМНКНЦХХ ДЮММНЦН СВЕАМНЦН ОНЯНАХЪ ДКЪ НАНГМЮВЕМХЪ ДЮММНЦН ЯБНИЯРБЮ СОНРПЕАКЪЕРЯЪ ЯКНБН "МЮАХБЙЮ" ХКХ ЯКНБНЯНВЕРЮМХЕ "БМСРПЕММХИ НРЯРСО".
нРЯРСО НР "МЮАХБЙХ" БМЕЬМЕЦН АКНВМНЦН ЩКЕЛЕМРЮ ДН ЦПЮМХЖШ БКНФЕММНЦН ЩКЕЛЕМРЮ МЮГШБЮЕРЯЪ margin. дКЪ ЕЦН НАНГМЮВЕМХЪ ЛШ АСДЕЛ СОНРПЕАКЪРЭ РЕПЛХМ "НРЯРСО" ХКХ ЯКНБНЯНВЕРЮМХЕ "БМЕЬМХИ НРЯРСО".
рЮЙХЛ НАПЮГНЛ, padding Х margin УЮПЮЙРЕПХГСЧР НРЯРСОШ АКНВМНЦН ЩКЕЛЕМРЮ НРМНЯХРЕКЭМНЦН МЮВЮКЮ ЕЦН ЯНДЕПФЮМХЪ Х НРМНЯХРЕКЭМН ЦПЮМХЖШ НУБЮРШБЮЧЫЕЦН ЕЦН ЩКЕЛЕМРЮ ПЮГЛЕРЙХ ЯННРБЕРЯРБЕММН:
нРЯРСОШ Х "МЮАХБЙЮ" ЛНЦСР АШРЭ КЕБШЛХ, ОПЮБШЛХ, БЕПУМХЛХ Х МХФМХЛХ. CSS ОНГБНКЪЕР БЮПЭХПНБЮРЭ КЧАШЕ ХГ МХУ. аНКЕЕ ОНДПНАМН НРЯРСОШ НАЯСФДЮЧРЯЪ Б ПЮГДЕКЕ "нРЯРСОШ(margin)", Ю "МЮАХБЙЮ" Б ПЮГДЕКЕ "мЮАХБЙЮ(padding)".
оПХ НРНАПЮФЕМХХ АКНЙЮ РЕЙЯРЮ ЛНФМН ОНЙЮГЮРЭ ЕЦН БХДХЛСЧ ЦПЮМХЖС. CSS ОНГБНКЪЕР НОПЕДЕКХРЭ ЕЕ ЯРХКЭ, ЬХПХМС Х ЖБЕР.оПХ ОПХЛЕМЕМХХ БХДХЛНИ ЦПЮМХЖШ ЯКЕДСЕР СВХРШБЮРЭ ЯОЕЖХТХЙС АПЮСГЕПНБ. нДМХЛ ХГ НЯЛШЯКЕММШУ ЯОНЯНАНБ ОПХЛЕМЕМХЪ ЦПЮМХЖШ ЪБКЕРЯЪ БХДХЛНЕ НЦПЮМХВЕМХЕ "ОКЮБЮЧЫХУ" АКНЙНБ РЕЙЯРЮ.
"оКЮБЮЧЫХИ" РЕЙЯРНБШИ АКНЙ ОНГБНКЪЕР ПЕЮКХГНБЮРЭ БНГЛНФМНЯРЭ НАРЕЙЮМХЪ ЩРНЦН АКНЙЮ РЕЙЯРНЛ:
нАРЕЙЮМХЕ НДМНЦН РЕЙЯРЮ ДПСЦХЛ ОПНХЯУНДХР Б РНЛ ФЕ ЯЮЛНЛ ЙКЧВЕ, ВРН Х НАРЕЙЮМХЕ РЕЙЯРНЛ ЙЮПРХМЙХ ХКХ РЮАКХЖШ. рЕЙЯР НУБЮРШБЮЧЫЕЦН АКНЙЮ ЯРПЕЛХРЯЪ БРХЯМСРЭЯЪ Б ЯБНАНДМНЕ ЛЕЯРН, НЯРЮБКЕММНЕ "ОКЮБЮЧЫХЛ" АКНЙНЛ. йНЦДЮ ЦПЮМХЖЮ "ОКЮБЮЧЫЕЦН" АКНЙЮ ЙНМВЮЕРЯЪ, НУБЮРШБЮЧЫХИ АКНЙ ПЮЯОПНЯРПЮМЪЕРЯЪ МЮ БЯЧ ЬХПХМС НРБЕДЕММНЦН ДКЪ РЕЙЯРЮ ОПНЯРПЮМЯРБЮ.
CSS ОНГБНКЪЕР ПЕЮКХГНБЮРЭ БШПЮБМХБЮМХЕ АКНЙЮ РЕЙЯРЮ МЕ РНКЭЙН ОН ЙПЮЧ ЯРПЮМХЖШ, МН Х ОН ЖЕМРПС(РНКЭЙН Б NN).
аКНЙ ПЮГЛЕЯРХКЯЪ ОН ЖЕМРПС ЯРПЮМХЖШ, ЕЯКХ ЯРПЮМХЖЮ ОПНЯЛЮРПХБЮЕРЯЪ Б NN. CSS МЕ ОНДДЕПФХБЮЕР ГМЮВЕМХЕ ЮРПХАСРЮ float ПЮБМШЛ center.
рЮЙХЛ НАПЮГНЛ, АКНЙ РЕЙЯРЮ Я РНВЙХ ГПЕМХЪ ПЮГЛЕЫЕМХЪ МЮ ЯРПЮМХЖЕ ПЮБМНЖЕМЕМ ЙЮПРХМЙЮЛ ХКХ ОПЪЛНСЦНКЭМШЛ НАКЮЯРЪЛ ОПХКНФЕМХИ.