Alt öğedeki kenar boşluğu üst öğeyi taşır

Bir var div( ebeveyn başka içerir) div( çocuk ). Üst öğe, bodybelirli bir CSS stili olmayan ilk öğedir . Ayarladığımda

.child
{
    margin-top: 10px;
}

Sonuçta çocuğumun üstü hala ebeveynle aynı hizada. Çocuğumun 10 piksel aşağı kaydırılması yerine, ailem 10 piksel aşağı kaydırılır.

Benim DOCTYPEolarak ayarlandı XHTML Transitional.

Burada ne eksik?

edit 1
Ebeveynimin, boyutları yukarıdan aşağıya doğru görüntülenmesi gereken bir arka planı olduğundan (piksel mükemmel) kesinlikle tanımlanmış boyutlara sahip olması gerekir. Bu yüzden dikey kenar boşlukları koymak hiç de kolay değil .

2
Bu davranış FF, IE ve CR'de aynıdır.

Alternatif bir Bulunan DIV öğeleri içinde marjları ile Çocuk elemanları da ekleyebilirsiniz:

.parent { overflow: auto; }

veya:

.parent { overflow: hidden; }

Bu, kenar önler çökmesi . Kenarlık ve dolgu aynı şeyi yapar. Bu nedenle, üst kenar boşluğunun daralmasını önlemek için aşağıdakileri de kullanabilirsiniz:

.parent {
    padding-top: 1px;
    margin-top: -1px;
}

Popüler istekle güncelleme: Boşlukları daraltmanın tüm amacı metinsel içerikle ilgilenmektir. Örneğin:

h1, h2, p, ul {
  margin-top: 1em;
  margin-bottom: 1em;
}

<h1>Title!</h1>
<div class="text">
  <h2>Title!</h2>
  <p>Paragraph</p>
</div>
<div class="text">
  <h2>Title!</h2>
  <p>Paragraph</p>
  <ul>
    <li>list item</li>
  </ul>
</div>

Tarayıcı kenar boşluklarını daralttığından, metin beklediğiniz gibi görünür ve <div>sarma etiketi kenar boşluklarını etkilemez. Her öğe etrafında boşluk olmasını sağlar, ancak boşluk iki katına çıkmaz. Marjları <h2>ve <p>eklemek olmaz, ancak birbirinin içine kayar (onlar çökecek). Aynı şey <p>ve <ul>öğesi için de geçerlidir .

Ne yazık ki, modern tasarımlarla bu fikir açıkça bir konteyner istediğinizde sizi ısıtabilir. Buna CSS konuşmada yeni bir blok formatlama bağlamı denir . overflowVeya marj hile sana bu verecektir.

Bu normal bir davranıştır (en azından tarayıcı uygulamaları arasında). Üst kenarda dolgu yoksa, kenar boşluğu çocuğun üst öğeye göre konumunu etkilemez, bu durumda çoğu tarayıcı çocuğun kenar boşluğunu üst öğenin dolgusuna ekler.

İstediğiniz davranışı elde etmek için şunlara ihtiyacınız vardır:

.child {
    margin-top: 0;
}

.parent {
    padding-top: 10px;
}

Tüm cevaplar sorunu çözse de, bunlar gibi ödünleşmeler / düzeltmeler / uzlaşmalar ile birlikte gelir

• floats, Öğeleri yüzmek zorundasın
• border-top, Bu -1px, üst öğeyi en az 1 piksel aşağı doğru iter; bu daha sonra üst öğenin kendisine kenar boşluğu ekleyerek ayarlanmalıdır . Bu, üst öğenin zaten margin-topgöreceli birimlerde olması durumunda sorun yaratabilir .
• padding-top, kullanmakla aynı etki border-top
• overflow: hidden, Ebeveynin açılır menü gibi taşan içerik görüntülemesi gerektiğinde kullanılamaz
• overflow: auto, (Kasıtlı olarak) taşan içeriğe (gölgeler veya araç ipucu üçgeni gibi) sahip üst öğe için kaydırma çubukları sunar

Sorun, CSS3 sözde öğeleri kullanılarak aşağıdaki şekilde çözülebilir

.parent::before {
  clear: both;
  content: "";
  display: table;
  margin-top: -1px;
  height: 0;
}

https://jsfiddle.net/hLgbyax5/1/

display:inline-blockalt öğeye stil ekle

üst öğe en azından  alt öğeden önce boş bırakılmamalıdır .

Bu benim için işe yaradı

.parent {
padding-top: 1px;
margin-top: -1px;
}

.child {
margin-top:260px;
}

http://jsfiddle.net/97fzwuxh/

.Css öğenizin içinde> bir div öğesinin display özelliğini satır içi bloke olarak ayarlarsanız , sorunu çözdüğünü görüyorum . ve marj beklendiği gibi çalışacaktır.

Düzgün CSS çözümü

İçeriği olmayan bir ilk alt öğeyi istemeden hareket eden div öğesine eklemek için aşağıdaki kodu kullanın:

.parent:before
{content: '';position: relative;height: 0px;width: 0px;overflow: hidden;white-space: pre;}

Bu yöntemin avantajı, mevcut herhangi bir öğenin CSS'sini değiştirmenize gerek olmaması ve bu nedenle tasarım üzerinde minimum etkiye sahip olmasıdır. Bunun yanında, eklenen öğe DOM ağacında olmayan bir sözde öğedir .

Sahte öğeler için destek yaygındır: Firefox 3+, Safari 3+, Chrome 3+, Opera 10+ ve IE 8+. Bu, herhangi bir modern tarayıcıda çalışacaktır ( ::beforeIE8'de desteklenmeyen yeni tarayıcılara dikkat edin ).

bağlam

Bir öğenin ilk alt öğesinde margin-top , üst konumunu, gereksiz kenar boşluklarını daraltmanın bir yolu olarak ayarlar. Neden? Aynen öyle.

Aşağıdaki sorun göz önüne alındığında:

<style type="text/css">
div {position: relative;}
.parent {background-color: #ccc;}
.child {margin-top: 40px;}
</style>

<div class="parent"><!--This div moves 40px too-->
    <div class="child">Hello world!</div>
</div>

Basit bir alan gibi içeriğe sahip bir çocuk ekleyerek düzeltebilirsiniz. Ancak hepimiz, sadece tasarımla ilgili bir konu için alan eklemekten nefret ediyoruz. Bu nedenle, white-spaceiçeriği sahte yapmak için özelliği kullanın.

<style type="text/css">
div {position: relative;}
.parent {background-color: #ccc;}
.child {margin-top: 40px;}
.fix {position: relative;white-space: pre;height: 0px;width: 0px;overflow: hidden;}
</style>

<div class="parent"><!--This div won't move anymore-->
    <div class="fix"></div>
    <div class="child">Hello world!</div>
</div>

Burada position: relative;, sabitlemenin doğru konumlandırılmasını sağlar. Ve white-space: pre;düzeltmeye beyaz boşluk gibi herhangi bir içerik eklemenize gerek kalmaz. Ve height: 0px;width: 0px;overflow: hidden;düzeltmeyi asla görmeyeceğinizden emin olur.

Sen eklemeniz gerekebilir line-height: 0px;veya max-height: 0px;yükseklik antik IE tarayıcıları (ben emin değilim) aslında sıfırdır sağlamak için. Ve isteğe bağlı olarak <!--dummy-->, işe yaramazsa eski IE tarayıcılarda ekleyebilirsiniz .

Kısacası, tüm bunları yalnızca CSS ile yapabilirsiniz (bu, HTML DOM ağacına gerçek bir çocuk ekleme ihtiyacını ortadan kaldırır):

<style type="text/css">
div {position: relative;}
.parent {background-color: #ccc;}
.child {margin-top: 40px;}

.parent:before {content: '';position: relative;height: 0px;width: 0px;overflow: hidden;white-space: pre;}
</style>

<div class="parent"><!--This div won't move anymore-->
    <div class="child">Hello world!</div>
</div>

"Div üst öğesi" ni "div child" kenar boşluğunu kullanın:
Üst öğede şu css'yi kullanın:

• şamandıra
• Dolgu malzemesi
• sınır
• taşma

marginElemanlarının içinde yer .childÇöken.

<html>
<style type="text/css" media="screen">
    #parent {background:#dadada;}
    #child {background:red; margin-top:17px;}
</style>
<body>
<div id="parent">

    <p>&amp;</p>

    <div id="child">
        <p>&amp;</p>    
    </div>

</div>
</body>
</html>

Bu örnekte, pbir alıyor margintarayıcı varsayılan stilleri arasından. Tarayıcı varsayılanı font-sizegenellikle 16 pikseldir. margin-topÜzerinde 16px'den daha büyük bir değere sahip olarak #childkonum hareketinin farkına varmaya başlarsınız.

Ben de bu sorunu yaşadım ama olumsuz marjlar kesmek önlemek için tercih etti, bu yüzden bir

<div class="supercontainer"></div>

etrafında kenar boşlukları yerine dolgulara sahip. Tabii ki bu daha fazla divit anlamına geliyor, ancak bunu düzgün bir şekilde yapmanın muhtemelen en temiz yolu.

ilginç bir şekilde, bu soruna en sevdiğim çözüm burada henüz belirtilmedi: float kullanmak.

html:

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

css:

.parent{width:100px; height:100px;}
.child{float:left; margin-top:20px; width:50px; height:50px;}

buradan bakın: http://codepen.io/anon/pen/Iphol

Not Eğer ebeveyn dinamik yüksekliğe ihtiyaç durumda, aynı zamanda yüzer sahip olduğunu, bu nedenle sadece yerine height:100px;görefloat:left;

Doğru cevabı bilmeden önce bulduğum alternatif bir çözüm , ana öğeye şeffaf bir kenarlık eklemekti .

Kutunuzda fazladan piksel kullanılacak ...

.parent {
    border:1px solid transparent;
}

topBunun yerine kullanmak margin-top, uygunsa başka bir olası çözümdür.