Блок үлгісі. Сыртқы шеттер. Ішкі жиектер

Тақырып бойынша 11 материал табылды

Блок үлгісі. Сыртқы шеттер. Ішкі жиектер

Материал туралы қысқаша түсінік

Жоспары: CSS-те блок үлігісі Сыртқы шеттер (margin). Ішкі жиектер (padding)

Материалдың қысқаша нұсқасы

Тақырыбы: Блок үлгісі. Сыртқы шеттер. Ішкі жиектер

Жоспары:

CSS-те блок үлігісі
Сыртқы шеттер (margin). Ішкі жиектер (padding)

Веб-шолғышқа бет элементтері шағын контейнерлер немесе блоктар ретінде көрінеді. Бұл блоктар әртүрлі мазмұнды — мәтінді, суреттерді, тізімдерді, кестелерді және басқа элементтерді қамтуы мүмкін. Бұл блоктардағы элементтер блоктар ретінде әрекет етеді.

Блок моделін схемалық түрде келесідей көрсетуге болады:

Элемент сыртқы контейнерде орналасқан делік. Бұл негізгі элемент, div элементі немесе басқа нәрсе болуы мүмкін. Ол басқа элементтерден CSS margin сипатымен сипатталатын белгілі бір қашықтықпен - сыртқы толтырғышпен бөлінген . Басқаша айтқанда, маржа қасиеті ағымдағы элементтің шекарасынан басқа көрші элементтерге немесе сыртқы контейнердің шекараларына дейінгі қашықтықты анықтайды.

Содан кейін элементтің өзі келеді. Ал басында оның шекарасы орналасқан, ол CSS-те border қасиетімен сипатталады .

Жиектен кейін padding қасиеті арқылы CSS-те сипатталған толтырғыш келеді . Толтырғыш элементтің шекарасынан ішкі мазмұнға дейінгі қашықтықты анықтайды.

Одан кейін ішкі мазмұн келеді, ол да бірдей қорап үлгісін жүзеге асырады және сонымен қатар сыртқы және ішкі толтырғыш пен жиегі бар басқа элементтерден тұруы мүмкін.

Мысалы, келесі веб-бетті анықтайық:

<!DOCTYPE html>

<html>

<head>

<title>Блочная модель в CSS3</title>

<style>

div{

margin: 15px; /* внешний отступ */

padding: 11px; /* внутренний отступ */

border: 3px solid red; /* границы шириной в 3 пикселя сплошной красной линией */

}

</style>

</head>

<body>

<div>

Первый блок

</div>

<div>

Второй блок

</div>

</body>

</html>

Браузерде веб-бетті іске қосқаннан кейін біз нақты элементтердің қорап үлгісін көре аламыз. Мұны істеу үшін қажетті элементті тінтуірдің оң жақ түймешігімен нұқыңыз және пайда болған контекстік мәзірден элементтің бастапқы кодын көру опциясын таңдаңыз. Бұл опцияның әртүрлі браузерлерде әртүрлі атаулары болуы мүмкін. Мысалы, Google Chrome-да бұл Көру көзі :

Mozilla Firefox-та бұл элемент Inspect Element деп аталады .

Осы элементті таңдаған кезде браузер элемент коды, стильдері және блок үлгісі көрсетілетін панельді ашады:

Бұл модельде біз элементтің жиектері мен жиектерінің қалай орнатылғанын, басқа элементтердің жиектерін көруге және қажет болған жағдайда олардың мәнер мәндерін динамикалық түрде өзгертуге болады.

Егер біз маржа, толтыру және жиек сипаттарының мәндерін нақты көрсетпесек, шолғыш алдын ала орнатылған мәндерді қолданады.

Margin қасиеті элементтің басқа элементтерден қашықтығын немесе оның сыртқы контейнерінің шекарасын анықтайды. Әрбір жағында шеттерді орнату үшін арнайы CSS сипаттары бар:

margin-top : жоғарғы жиек
маржа-төменгі : төменгі шегініс
margin-left : сол жақ жиек
шеткі оң жақ : оң жақ шегініс

Мысалы:

<!DOCTYPE html>

<html>

<бас>

<title>CSS3 ішіндегі қорап үлгісі</title>

<стиль>

див{

жоғарғы шет: 30px; /* жоғарыдан шеті */

сол жақ шет: 25px; /* сол жақ шет */

оң жақ шет: 20px; /* оң жақ шеті */

төменгі жиек: 15px; /* төменгі жиек */

жиек: 3px тұтас қызыл; /* шекара */

}

</style>

</head>

<дене>

<div>

Бірінші блок

</div>

<div>

Екінші блок

</div>

<div>

Үшінші блок

</div>

</body>

</html>

Төрт емес, бір сипатты орнатуға болады:

див{

жиегі: 30px 20px 15px 25px;

жиек: 3px тұтас қызыл;

}

Сипат пішімде көрсетілген:

шеті: жоғарғы_шегі оң жақ_шегі төменгі_шегі солға;

Егер барлық төрт шегіністің мәндері бірдей болса, онда біз тек бір мәнді көрсете аламыз:

жиегі: 25px;

}

Бұл жағдайда барлық төрт толтыру үшін 25 пиксель пайдаланылады.

Шегіністерді орнату үшін пиксельдегі (px) немесе em немесе пайыздардағы нақты мәндерді немесе мәнді auto(автоматты шегініс) пайдалануға болады.

Мысалы:

сол жақ шет: 2эм;

Мән 2 emэлементтің қаріп өлшемінен екі есе үлкен қашықтықты көрсетеді.

Пайыздарды пайдаланған кезде веб-шолғыштар толтыру өлшемін мәнерленетін элементті қамтитын контейнер элементінің еніне негізделген есептейді.

Сонымен қатар, егер бірнеше элементтер тиіп кетсе, браузер әрбір элемент үшін ең үлкен шегіністерді таңдап, оны пайдаланады. Мысалы, жоғарыдағы мысалда келесі стиль қолданылды:

жоғарғы шет: 30px; /* жоғарыдан шеті */

сол жақ шет: 25px; /* сол жақ шет */

оң жақ шет: 20px; /* оң жақ шеті */

төменгі жиек: 15px; /* төменгі жиек */

}

Бірінші және екінші блоктар арасындағы қашықтық 30 пиксель болады – бірінші div блогының 15 пиксельге тең margin-topқасиеті болғанына қарамастан, екінші div блогының қасиетінің мәні.margin-bottom

padding қасиеті элементтің шекарасынан оның ішкі мазмұнына дейінгі ішкі толтыруды анықтайды. Маржа сипаты сияқты, CSS әр тарапқа толтыруды орнататын төрт қасиетке ие:

padding-top : жоғарғы жағындағы толтыру
padding-bottom : төменгі жағынан толтыру
padding-left : сол жақ толтыру
padding-right : оң жақта толтыру

Мысалы:

<!DOCTYPE html>

<html>

<head>

<title>Блочная модель в CSS3</title>

<style>

div.outer{

margin: 25px;

padding-top:30px;

padding-right: 25px;

padding-bottom: 35px;

padding-left: 28px;

border: 2px solid red;

}

div.inner{

height: 50px;

background-color:blue;

}

</style>

</head>

<body>

</div>

</body>

</html>

Бақылау сұрақтары:

Блок үлгісі дегеніміз не?
Блок үлгісінің негізгі бөліктерін ата.
Margin қасиеті не үшін қолданылады?
Padding қасиетінің қызметін түсіндір.
Margin мен padding арасындағы айырмашылық қандай?
Margin мәнін қалай беру тәсілдері бар?
Padding мәнін бірнеше бағыт бойынша беруге бола ма?
CSS-те margin: auto дегеніміз не білдіреді?
Padding қасиеті элементтің өлшеміне қалай әсер етеді?
Блок үлгісін дұрыс қолдану веб-бет дизайнында не үшін маңызды?

Жүктеу

Бөлісу

ЖИ арқылы жасау

Файл форматы:

docx

Басқа Мақала Басқа

05.02.2026

Жүктеу

ЖИ арқылы жасау

Жариялаған:

Сапархан Диана Бекарысқызы

Бұл материалды қолданушы жариялаған. Ustaz Tilegi ақпаратты жеткізуші ғана болып табылады. Жарияланған материалдың мазмұны мен авторлық құқық толықтай автордың жауапкершілігінде. Егер материал авторлық құқықты бұзады немесе сайттан алынуы тиіс деп есептесеңіз,
шағым қалдыра аласыз

Блок үлгісі. Сыртқы шеттер. Ішкі жиектер

Блок үлгісі. Сыртқы шеттер. Ішкі жиектер

Химия пәні

Тарих пәні

Биология пәні

Ағылшын тілі пәні

География пәні

Информатика пәні

Мектепке дейінгі білім беру

«Қазақ тілі» жəне «Қазақ əдебиеті»

Дене шынықтыру

Білім алушылардың білім сапасын арттыру

Инклюзивті білім беру