CSS box model vizualizatoru
width, height, padding, border və margin-i dəyişin — sxemdə qutunun bütün qatları görünür, aşağıdakı hesablama isə elementin əslində nə qədər enli olduğunu göstərir. Hazır CSS önizləmənin altında çıxır.
.box {
box-sizing: content-box;
width: 200px;
height: 120px;
padding: 20px;
border: 5px solid;
margin: 20px;
}Necə istifadə etmək olar
widthvəheighttəyin edin, sonrabox-sizing-icontent-boxiləborder-boxarasında dəyişin və yekun ölçünün necə dəyişdiyinə baxın.padding,bordervəmargin-i tənzimləyin. Yuxarı, sağ, aşağı və solu ayrıca təyin etmək üçün «Bütün tərəflər birlikdə» işarəsini götürün.- Sxemin altındakı hesablamaya baxın: yekun en və hündürlüyün nədən yarandığını göstərir.
- «Kopyala» düyməsini basın və
.boxqaydasını öz CSS faylınıza yapışdırın.
Bu necə işləyir
Hər qutunun dörd qatı
Hər element içdən çölə doğru dörd qatdan ibarət düzbucaqlıdır: content (mətn və daxili elementlər), padding (məzmunla haşiyə arasındakı daxili boşluq), border (haşiyə) və margin (qonşu elementlərə qədər şəffaf xarici boşluq). Fon content, padding və border-in altını rəngləyir, lakin margin-in altına keçmir.
content-box və border-box
Susmaya görə box-sizing: content-box işləyir: width və height yalnız məzmunu təyin edir, padding və border isə üstünə əlavə olunur. Buna görə padding: 20px və border: 5px ilə width: 200px eni 250px olan blok verir. box-sizing: border-box ilə eyni width padding və border-i də əhatə edir, kiçilən isə məzmun olur. Ona görə əksər layihələr belə sıfırlama ilə başlayır:
*, *::before, *::after {
box-sizing: border-box;
}Qısa yazılış: 1, 2, 3 və ya 4 dəyər
padding, margin və border-width saat əqrəbi istiqamətində dörd dəyərə qədər qəbul edir: yuxarı, sağ, aşağı, sol. Bir dəyər bütün tərəflər, iki dəyər şaquli və üfüqi, üç dəyər yuxarı, üfüqi və aşağı deməkdir. Generator 1, 2 və ya 4 dəyərdən ibarət ən qısa formanı yazır.
margin: 10px 20px 30px 40px; /* yuxarı sağ aşağı sol */
margin: 10px 20px; /* şaquli üfüqi */Margin-in birləşməsi (collapsing)
Qonşu blokların şaquli margin-ləri birləşir: birinin margin-bottom: 30px, növbətinin margin-top: 20px olarsa, məsafə 50px yox, daha böyük olan 30px olur. Valideynin margin-i də, onları heç nə ayırmırsa (padding, border və ya məzmun yoxdursa), ilk və ya son uşağın margin-i ilə birləşə bilər. Üfüqi margin-lər, eləcə də flex və grid elementlərinin margin-ləri birləşmir.
.a { margin-bottom: 30px; }
.b { margin-top: 20px; }
/* .a və .b arasındakı məsafə = 30px */Tez-tez verilən suallar
content-box ilə border-box arasında fərq nədir?
content-box-da width yalnız məzmunun enidir, ona görə padding və border elementi enli edir. border-box-da width haşiyənin sonuna qədər bütün qutunun enidir, buna görə nə qədər padding əlavə etsəniz də elementin ölçüsü dəyişmir.
Niyə element təyin etdiyim width-dən enlidir?
Çox güman ki, box-sizing content-box-dır və padding ilə border enə əlavə olunur. width: 100% və padding: 20px olan blok valideynindən 40px kənara çıxır. box-sizing: border-box yazın — problem aradan qalxır.
Margin-lər toplanırmı?
Həmişə yox. Qonşu blokların şaquli margin-ləri böyük olana qədər birləşir, üfüqi margin-lər və flex ya grid elementlərinin margin-ləri isə toplanır. Sxem tək elementin margin qutusunu göstərir, buna görə orada birləşmə görünmür.
padding yoxsa margin seçməli?
padding elementin daxilindəki boşluq üçündür: fonun altında qalır və kliklənən sahəyə daxildir. margin elementlər arasındakı məsafə üçündür: həmişə şəffafdır. Hər ikisində faiz dəyərləri valideyn blokun enindən hesablanır.
