Маржа жана Толтурбоо
Маржа менен толтуруунун ортосундагы айырма CSSте маанилүү аспект болуп саналат, анткени маржа жана толтуруу CSSте ар кандай элементтердин ортосундагы аралыкты камсыз кылуу үчүн колдонулган эки маанилүү түшүнүк. Толтургучтар жана четтер бири-бирин алмаштырбайт жана ар кандай максаттарга ээ, ошондуктан туура колдонулушу керек. Толтуруучу блоктун мазмуну менен чек арасынын ортосундагы боштук. Маржа, экинчи жагынан, блоктун чегинен тышкары мейкиндик. Маржа блокторду чектеш блоктордон бөлөт, ал эми толтуруу чекти мазмундан бөлүп турат.
Padding деген эмне?
CSS'те (Стильдердин каскаддык баракчалары) толтуруу - бул мазмун менен чек аранын ортосундагы боштук. Ал блоктун мазмунун анын четинен бөлүп турат. Толтурма тунук жана элементтин фон сүрөтүн же фон түсүн камтыйт. Элементти толтуруунун көлөмү CSS кодундагы "толтуру" терминин колдонуу менен аныкталат. Мисалы, мазмундун айланасына 25 пиксель толтуруу үчүн төмөнкү кодду колдонсо болот.
div {
туурасы: 300px;
бийиктиги: 300px;
толтуруучу: 25px;
чек: 25px катуу;
}
Керек болсо, ар кандай толтуруучу маанилерди сол, оң, жогору жана ылдый үчүн да өзүнчө көрсөтсө болот. Төмөнкү код бөлүгү ар бир тарап үчүн ар кандай толтуруучу маанилерди аныктайт.
div {
туурасы: 300px;
бийиктиги: 300px;
толтуруучу үстү: 25px;
толтуруучу-төмөнкү: 35px;
толтуруучу-сол: 5px;
толтуруучу-оң: 10px;
чек: 25px катуу;
}
Маржа деген эмне?
CSS'те (Стильдердин каскаддык таблицаларында) маржа - чектин сыртындагы боштук. Ал блокту башка блоктордон бөлүп турат. Маржа да тунук, бирок толтургучтан чоң айырмачылык, маржа элементке колдонулган фон сүрөттөрүн же фон түстөрүн камтыбайт. CSS'те маржа өлчөмү "маржа" термини менен аныкталат. Төмөнкү код бөлүгү div блогунун айланасында 25px чекти колдонду.
div {
туулугу: 320px;
бийиктиги: 320px;
чек: 5px катуу;
маржа: 25px;
}
Блоктун ар кайсы тараптары үчүн да ар кандай маанилерди көрсөтүүгө болот. Төмөнкү код бөлүгү ар бир тарап үчүн ар кандай маржа маанилерин колдонот.
div {
туулугу: 320px;
бийиктиги: 320px;
чек: 5px катуу;
жогорку чети: 25px;
маржа-төмөнкү: 35px;
маржа-сол: 5px;
оң чети: 10px;
}
Маржа менен толтуруунун ортосунда кандай айырма бар?
• Толтуруучу - бул чек менен мазмундун ортосундагы боштук, ал эми маржа - чектин сыртындагы боштук.
• Толтуруу блоктун мазмунун чек арадан бөлөт. Маржа бир блокту экинчи блоктон бөлүп турат.
• Толтургуч мазмунга колдонулуучу фон сүрөттөрүнөн жана фон түстөрүнөн турат, ал эми четинде андай мазмун жок.
• Кошумча блоктордун четтери бири-бирине дал келбей калышы мүмкүн.
Корытынды:
Полдинг жана маржа
Толтуруучу блоктун чек арасынын ичиндеги чекти мазмундан бөлүп турган боштук. Чет - бул блокту чектеш блоктордон бөлүп турган чектин сыртындагы аралык. Дагы бир айырмачылык, толтургуч мазмундун айланасында колдонулган фон сүрөтүн жана фон түстөрүн камтыйт, ал эми маржа аларды камтыбайт. Серепчи бетти көрсөткөндө, кээде чектеш блоктордун четтери бири-бирине дал келиши мүмкүн, бирок толтуруу үчүн андай болбойт.
