Kenar boşluğu daralmasını tamamen devre dışı bırakmanın bir yolu var mı? Bulduğum tek çözüm ("harmanlanmayan" adıyla), 1 piksel kenarlık veya 1 piksel dolgu kullanılmasını gerektiriyor. Bunu kabul edilemez buluyorum: yabancı piksel iyi bir sebep olmadan hesaplamaları zorlaştırıyor. Bu kenar boşluğu daralmasını devre dışı bırakmanın daha makul bir yolu var mı?

İki ana marj çöküşü türü vardır:

• Bitişik öğeler arasındaki boşlukları daraltma
• Üst öğe ve alt öğe arasında kenar boşlukları daraltma

Bir dolgu veya kenarlık kullanılması, yalnızca ikinci durumda çökmeyi önleyecektir. Ayrıca, üst öğeye uygulanan overflowdefault ( visible) öğesinden farklı bir değer daralmayı önler. Böylece, hem overflow: autove overflow: hiddenaynı etkiye sahip olacaktır. Belki de kullanırken tek fark hidden, ebeveyni sabit bir yüksekliğe sahipse içeriği gizlemenin istenmeyen sonucudur.

Üst öğeye uygulandıktan sonra bu davranışı düzeltmeye yardımcı olabilecek diğer özellikler şunlardır:

• float: left / right
• position: absolute
• display: inline-block / flex

Hepsini burada test edebilirsiniz: http://jsfiddle.net/XB9wX/1/ .

Her zamanki gibi Internet Explorer'ın istisna olduğunu eklemeliyim. Daha spesifik olarak, IE 7'de üst öğe için bir tür düzen belirtildiğinde kenar boşlukları çökmez width.

Kaynaklar: Sitepoint'in makalesi Çöken Kenar Boşlukları

Bunun için eski mikro düzeltmeyi de kullanabilirsiniz.

#container:before, #container:after{
    content: ' ';
    display: table;
}

Güncellenmiş kemanı görün: http://jsfiddle.net/XB9wX/97/

Bildiğim kadarıyla görsel etkisi olmayan kenar boşluğu çökmesini devre dışı bırakmak için düzgün bir hile, ebeveynin dolgusunu şu şekilde ayarlamaktır 0.05px:

.parentClass {
    padding: 0.05px;
}

Dolgu artık 0 değildir, bu nedenle artık çökme meydana gelmez, ancak aynı zamanda dolgu görsel olarak 0'a yuvarlanacak kadar küçüktür.

Başka bir dolgu isteniyorsa, dolgu işlemini yalnızca örneğin kenar boşluğu daraltılmasının istenmediği "yöne" uygulayın padding-top: 0.05px;.

Çalışma örneği:

.noCollapse {
  padding: 0.05px;
}

.parent {
  background-color: red;
  width: 150px;
}

.children {
  margin-top: 50px;

  background-color: lime;      
  width: 100px;
  height: 100px;
}

<h3>Border collapsing</h3>
<div class="parent">
  <div class="children">
  </div>
</div>

<h3>No border collapsing</h3>
<div class="parent noCollapse">
  <div class="children">
  </div>
</div>

Düzenle: değeri olarak 0.1değiştirdi 0.05. Chris Morgan'ın aşağıdaki yorumda bahsettiği gibi ve bu küçük testten , Firefox'un 0.1pxdolguları dikkate aldığı anlaşılıyor . Yine 0.05pxde, hile yapıyor gibi görünüyor.

overflow:hidden marjların çökmesini önler, ancak yan etkilerden arındırılmaz - yani ... taşmayı gizler.

Bunun dışında ve bahsettiğiniz şey, onunla canlı olarak öğrenmek ve gerçekten yararlı olduklarını (3 ila 5 yılda bir gelir) bu gün için öğrenmek zorundasınız.

Aslında, kusursuz çalışan bir tane var:

ekran: esnek; esnek yön: sütun;

Sadece IE10 ve üstü desteği ile yaşayabildiğiniz sürece

.container {
  display: flex;
  flex-direction: column;
    background: #ddd;
    width: 15em;
}

.square {
    margin: 15px;
    height: 3em;
    background: yellow;
}

<div class="container">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
</div>
<div class="container">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
</div>

Her webkit tabanlı tarayıcı özellikleri desteklemelidir -webkit-margin-collapse . Yalnızca üst veya alt kenar boşluğu için ayarlayacak alt özellikler de vardır. Değerlere daraltma (varsayılan) verebilir, atabilir (komşu kenar boşluğu varsa kenar boşluğunu 0 olarak ayarlar) ve ayrılabilir (kenar boşluğunun daralmasını önler).

Bunun Chrome ve Safari'nin 2014 sürümlerinde çalıştığını test ettim. Ne yazık ki, bunun webkit'e dayanmadığı için IE'de destekleneceğini düşünmüyorum.

Apple'ın Safari CSS Referansını OkuyunTam açıklama için .

Mozilla'nın CSS web seti uzantıları sayfasını kontrol ederseniz , bu mülkleri özel olarak listeler ve kullanmamanızı öneririz. Bunun nedeni, yakında standart CSS'ye girmeyecek olmaları ve yalnızca webkit tabanlı tarayıcıların bunları destekleyecek olmalarıdır.

Bu çok eski bir yazı olduğunu biliyorum ama sadece bir üst öğe üzerinde flexbox kullanmanın alt öğeleri için kenar boşluğu çökmesini devre dışı bırakacağını söylemek istedim.

Ebeveynin sahip olması nedeniyle marj çöküşüyle ​​benzer bir sorun yaşadım position göreli olarak ayarlanmış olması . Kenar boşluğu daralmasını devre dışı bırakmak için kullanabileceğiniz komutların listesi.

BURADA TEST EDİLMESİ GEREKENLER

Sadece herhangi atamak için denemek parent-fix*için sınıf div.containerelemanı veya herhangi bir sınıf children-fix*için div.margin. İhtiyaçlarınıza en uygun olanı seçin.

Ne zaman

• marjı çöken olan engelliler ,div.absolute kırmızı arka plan sayfanın en üstüne yerleştirilmiş olacaktır ile.
• marj daraltılırken div.absolute , Y ile aynı Y koordinatına yerleştirilirdiv.margin

html, body { margin: 0; padding: 0; }

.container {
  width: 100%;
  position: relative;
}

.absolute {
  position: absolute;
  top: 0;
  left: 50px;
  right: 50px;
  height: 100px;
  border: 5px solid #F00;
  background-color: rgba(255, 0, 0, 0.5);
}

.margin {
  width: 100%;
  height: 20px;
  background-color: #444;
  margin-top: 50px;
  color: #FFF;
}

/* Here are some examples on how to disable margin 
   collapsing from within parent (.container) */
.parent-fix1 { padding-top: 1px; }
.parent-fix2 { border: 1px solid rgba(0,0,0, 0);}
.parent-fix3 { overflow: auto;}
.parent-fix4 { float: left;}
.parent-fix5 { display: inline-block; }
.parent-fix6 { position: absolute; }
.parent-fix7 { display: flex; }
.parent-fix8 { -webkit-margin-collapse: separate; }
.parent-fix9:before {  content: ' '; display: table; }

/* Here are some examples on how to disable margin 
   collapsing from within children (.margin) */
.children-fix1 { float: left; }
.children-fix2 { display: inline-block; }

<div class="container parent-fix1">
  <div class="margin children-fix">margin</div>
  <div class="absolute"></div>
</div>

İşte jsFiddle ile düzenleyebileceğiniz örnek

Daha yeni tarayıcılarda (IE11 hariç), üst-alt kenar boşluğunun çökmesini önlemek için basit bir çözüm kullanmaktır display: flow-root. Bununla birlikte, bitişik elemanın çökmesini önlemek için yine de başka tekniklere ihtiyacınız olacaktır.

DEMO (önce)

.parent {
  background-color: grey;
}

.child {
  height: 16px;
  margin-top: 16px;
  margin-bottom: 16px;
  background-color: blue;
}

<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>

DEMO (sonra)

.parent {
  display: flow-root;
  background-color: grey;
}

.child {
  height: 16px;
  margin-top: 16px;
  margin-bottom: 16px;
  background-color: blue;
}

<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>

Bilgileriniz için ızgara kullanabilirsiniz ancak yan etkileri vardır :)

.parent {
  display: grid
}