CSS qutusu: margin, padding və border
Çöldəki boşluq margin, içdəki boşluq padding, xətt isə border-dir.
Bütün dərslər · CSS dərsləri: rəng, qutu və hover
Üç boşluq
Hər element bir qutudur. border xətdir. padding xəttin içindəki boşluqdur. margin qutunun çölündəki boşluqdur.
.card {
margin: 16px;
padding: 12px;
border: 1px solid #2f6bff;
background: #101826;
color: white;
}Nə vaxt hansı
Yazı qutunun kənarına yapışıbsa padding artır. İki qutu bir-birinə dəyirsə aralarına margin qoy. Xətt görünmürsə border yaz.
Suallar
margin və padding eynidirmi? Xeyr. margin çöldədir, padding içdədir.
16px nədir? 16 piksel. Ekranda kiçik bir boşluqdur.
border yazılmazsa nə olur? Qutu qalır, amma xətt görünmür.
Rəng hara düşür? background qutunun içini, color isə yazını boyayır.