CSS толтыру - CSS қорап үлгісінің сипаттарының бірі. Бұл стенділік сипаты HTML элементінің барлық төрт жағының айналасындағы толтырғышты орнатады. CSS толтыруын әр HTML тегіне қолдануға болады (кейбір кесте тегтерін қоспағанда). Сонымен қатар, элементтің барлық төрт жағында басқа мән болуы мүмкін.
CSS толтыру сипаты
CSS-тегжейлі сипаттамасын пайдалану үшін, Сіз Mnemonic «TRouBLe» (немесе «TRiBbLe» сізге Star Trek жанкүйерлерін) пайдалана аласыз. Бұл жоғарғы , оң жақ , төменгі және сол жаққа арналған және ол стенографиялық сипатта орнатылған толтырғыш ені тәртібіне қатысты. Мысалға:
толтыру: жоғарғы оң жақ төменгі сол жағы; толтыру: 1px 2px 3px 6px;Егер сіз жоғарыда аталған мәндерді пайдаланған болсаңыз, ол сіз қолданатын HTML элементінің әр жағына әртүрлі толтырғыш мәнді қолданатын болады. Егер бірдей толтырманы барлық төрт жағына қолданғыңыз келсе, CSS-іңізді жеңілдетіп, бір ғана мәнді жазыңыз:
толтыру: 12px;CSS-нің осы жолымен элементтің барлық 4 жағына 12 пиксел толтыру қолданылатын болады.
Егер сіз толтырғыштың үстіңгі және астыңғы және сол және оң жақтары үшін бірдей болуын қаласаңыз, екі мәнді жаза аласыз:
толтыру: 24px 48px;Бірінші мән (24px) жоғарғы және төменгі жағына, ал екіншісі солға және оңға қолданылады.
Егер сіз үш мәнді жазсаңыз, онда көлденең жолақ (сол және оң) жоғарғы және төменгі жағын өзгерту кезінде бірдей болады:
толтыру: жоғарғы оң және сол жақ төменгі; толтыру: 0px 1px 3px;CSS қорап үлгісіне сәйкес, толтыру элемент / мазмұнға ең жақын. Бұл дегеніміз, толтырғыш мазмұн ені мен биіктігі мен сіз пайдаланатын кез келген шекара мәндері арасында элементке қосылады. Егер толтыру нөлге тең болса, онда ол мазмұнмен бірдей жиекке ие.
CSS толтыру мәндері
CSS толтыру кез келген теріс емес ұзақтық мәнін қабылдай алады. Px немесе em сияқты өлшеуді көрсетіңіз. Сондай-ақ, элемент бар блоктың ені пайыздық көрсеткіші болуы үшін толтырғыштың пайызын көрсете аласыз. Бұл жоғарғы және төменгі толтыруға арналған. Мысалға:
#контейнер {ені: 800px; биіктігі: 200px; } #container p {ені: 400px; биіктігі: 75%; толтыру: 25% 0; }Элементтің #container элементінің биіктігі #контейнердің биіктігінің 75% -ын, үстіңгі толтыруға арналған 25% және төменгі толтыруға 25% ені болады. Бұл 300 + 200 + 200 = 700 пиксельді құрайды.
CSS толтыруды қосудың әсері
Блоктық деңгейдегі элементтерде төрт жағында толтырғыш қолданылады. Элемент блок немесе қорап болғандықтан, өріс бокстың жағына қолданылады.
CSS толтырмасы кірістірілген элементтерге қосылса, тігінен толтыру сызықтың биіктігінен асып кетсе, кірістірілген элементтің үстінде және төменгі жағында элементтердің бір-біріне сәйкес болуы мүмкін, бірақ ол сызықтың биіктігін төмендетпейді. Кірістірілген элементтерге қолданылатын көлденең CSS толтырмасы элементтің басына және элементтің соңына қосылады. Ал толтырғыш сызықтарды орауға болады. Бірақ бұл көп жолды элементінің барлық жолдарына қолданылмайды, сондықтан мульти-жолды желілік мазмұнның сегментін шегіндіру үшін толтырғышты пайдалана алмайсыз.
Сондай-ақ, CSS2.1-де, ені ендерге (немесе ендерді толтыру үшін) пайызбен болатын элементке байланысты контейнерлік блоктарды жасай алмайсыз. Егер нәтижені жасасаңыз, анықталмаған. Браузерлер әлі де мазмұнды көрсетеді, бірақ сіз күткен нәтижелерді ала алмайсыз. Егер сіз бұл туралы ойласаңыз, онда контейнер элементі оның енін анықтау үшін оның ен элементтерінің енін білуі қажет сияқты, мысалы, ол алдын ала анықталған ені болмаса және бір немесе бірнеше ені контейнер элементінің пайыздық үлесі ретінде белгіленеді, ол жауапсыз дөңгелек тізбекті орнатады. Егер сіз құжатта ештеңе ені үшін пайыздарды пайдаланатын болсаңыз, басты элементтің ені де анықталғанына көз жеткізіңіз.