Soru CSS Sağ Marjı Taşma Kaydırma İçeren Bir Div İçinde Çalışmıyor


Biri diğerinin içinde iki tane div yapmaya çalışıyorum. İç div, dış divdan daha büyüktür, dış div overflow:scrollve iç div var margin:25px. Ben de bunu yapıyorum:

#outer {
    width: 200px;
    height: 100px;
    overflow: scroll;
}
#inner {
    width: 400px;
    height: 200px;
    margin: 25px;
}

...

<div id="outer">
    <div id="inner">

    </div>
</div>

25px'lik bir kenar boşluğuna sahip olan iç div yerine beklendiği gibi, ÜÇ taraflarda 25px'lik bir kenar boşluğu vardır, ancak sağ tarafta hiçbiri yoktur. Bu bence son derece karşı sezgisel.

İç div + 50px'i içerecek kadar genişlikte genişlikte bir orta div eklerseniz, onu doğru gösterebiliriz, ancak bu hacky bir çözüm gibi görünüyor.

JSFiddle'daki örneğimi görün: http://jsfiddle.net/d3Nhu/16/

Bu, her büyük tarayıcıda aynı şekilde olur. Bu davranış için iyi bir sebep var mı? CSS belirtimine göre bu doğru davranış mı?

NOT: Bu örnekte beklediğiniz gibi, eğer kullanmazsanız fark etmez overflow:auto yerine overflow:scroll.

DÜZENLE: Lütfen unutmayın değil Bu davranış için bir geçici çözüm arıyorum. (Ben zaten bir tane buldum.) neden Bu davranış için, özellikle de CSS belirtimi herhangi bir yer.


32
2017-07-27 20:40


Menşei


Sorunun güzel bir demo var brunildo.org/test/scroll-child-margin.html - John Mellor


Cevaplar:


TL; DR:

Kenar boşlukları, sargının dışa doğru genişletilmesinden ziyade bir öğeyi sarıcıdan taşımak içindir.

Uzun açıklama:

Bu davranış, bir width yatay ek olarak margin belgenin herhangi bir yerinde. Bunu çözmek için, aşağıdaki snippet'i düşünün. overflow özellik ve margin sarıcı elemanını genişletmez.

body {
    padding: 20px;
}
.outer {
    width: 400px;
    border: 1px solid black;
}
.inner {
    width: 400px;
    height: 40px;
    margin: 0 20px;
    background: grey;
}
<div class="outer">
    <div class="inner">
        
    </div>
</div>

Gördüğünüz gibi margin sargının boyutlarını genişletmesine neden olmadı, eleman taşmaya devam etti. Bu davranış, CSS 2.1 belirtiminde belgelenen Visual biçimlendirme modeli ayrıntıları altında belgelenmiştir.

"Alıntıdan alıntıNormal akışta blok seviyesi, değiştirilmemiş elemanlar" bölümü "Görsel biçimlendirme modeli ayrıntıları":

Aşağıdaki özelliklerin diğer özelliklerin kullanılmış değerleri arasında olması gerekir:

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = içeren bloğun genişliği

[...]

Yukarıdakilerin tümü 'auto' dışında bir hesaplama değerine sahipse, değerlerin "aşırı kısıtlı" olduğu ve kullanılan değerlerden birinin hesaplanan değerinden farklı olması gerektiği söylenir. İçeren satırın 'yön' özelliği 'ltr' değerine sahipse, 'kenar boşluğu' belirtilen değeri göz ardı edilir ve değer eşitliği doğru yapacak şekilde hesaplanır. 'Yön' değeri 'rtl' ise, bunun yerine 'kenar boşluğu' olur.

Bu alıntı oldukça yoğun, dolayısıyla sadece genişliğini göz ardı edelim border ve padding, ikisi de 0Bizi bırakarak width, margin-left, ve margin-right.

Artık sabit olduğun için width ve değerler margin-left ve margin-rightDeğerler "aşırı kısıtlanmış". Şimdi örneğimizde, yön olduğundan ltr varsayılan olarak margin-right telafi etmek zorundadır.

Yönün etkilerini görmek için, eklemeye çalışalım. dir="rtl" Sarıcı öğeye öznitelik.

body {
    padding: 20px;
}
.outer {
    width: 400px;
    border: 1px solid black;
}
.inner {
    width: 400px;
    height: 40px;
    margin: 0 20px;
    background: grey;
}
<div class="outer" dir="rtl">
    <div class="inner">
        
    </div>
</div>

Şimdi eleman sola taşıyor. Bakalım eğer bu dir="rtl" özniteliğinizde aynı etkiye sahiptir overflow: scroll örnek.

#outer {
    border: 1px solid #00F;
    width: 200px;
    height: 100px;
    overflow: scroll;
}
#inner {
    border: 1px solid #F0F;
    margin: 25px;
    width: 400px;
    height: 200px;
}
<div id="outer" dir="rtl">
    <div id="inner">
    
    </div>
</div>

Evet öyle. Marj şimdi sağdan ziyade solda yok.

Ama neden olmasın overflow: scroll kenar boşluklarını dahil et

Özellikle şartname gerektirmediği anlamına gelmez. Şimdi CSS 2 şartnamesine bir göz atalım. overflow özelliği.

"Alıntıdan alıntıTaşma ve kırpma" bölümü "Görsel efektler":

Taşma meydana geldiğinde, 'taşma' özelliği bir kutunun dolgu kenarına kırpılıp kırpılmadığını ve eğer öyleyse kırpılmış herhangi bir içeriğe erişmek için bir kaydırma mekanizmasının sağlanıp sağlanmadığını belirler.

Özellikle "kırpılmış içeriği" nasıl yazdığını görün. "İçerik" açıklaması için, CSS 2 belirtiminden aşağıdaki grafiğe başvurunuz.

"Grafikten"Kutu boyutları"bölüm"Kutu modeli":

box model

Görebildiğimiz gibi margin ayrıdır content. Bununla birlikte, bu noktada, kaydırma alanına sınırların ve dolguların dahil edildiğini belirtmek gerekir. Bu nedenle, spesifikasyon "içerik" dediğinde, büyük olasılıkla sınır-kutuya atıfta bulunulur ya da en azından, bunun nasıl yorumlandığı görünmektedir. .

Neden yapıyor display: inline-block iş?

Temel olarak, marjlar farklı şekilde davranır inline-block öğeler, çünkü bunlar blok seviyesinden ziyade içerik seviyesidir ve "aşırı-kısıtlanmış" olma konseptine sahip değildir.


41
2018-02-23 20:16





eklemek display:inline-block; için #inner div

bunu gör keman


15
2017-07-27 20:47



Divanın neden bir olması gerektiğine dair bir açıklama ekleyebilir misiniz? inline-block  sağ kenar boşluğu dışa doğru itmek için eleman? - mwcz
Beyaz alan bağımlı bir oluşturma ile ilgili bir şey var, bundan da emin değilim. Oldukça iyi bir referans var. designshack.net/articles/css/... - Keith
Referans için teşekkürler. Hala tam olarak beklediğim şey değil, ama bu biraz mantıklı. - Sean the Bean
Genişliğe bağlı iç içerik için css'iniz varsa, bunun iyi bir düzeltme olmadığını belirtmeliyiz: auto. JQuery UI's sekmeleri gibi bir şey, bilinen bir üst genişliğe sahip olmadığından artık divun tamamını doldurmaz. - rossisdead