Margin-Top dış div'i aşağı itin

Sarmalayıcı div öğemde ilk öğe olarak bir başlık div var, ancak başlık div içindeki bir h1'e bir üst kenar boşluğu eklediğimde, başlık div'in tamamını aşağı iter. Bir sayfadaki ilk görünür öğeye bir üst kenar boşluğu uyguladığımda bunun olduğunu anlıyorum.

İşte örnek bir kod parçacığı. Teşekkürler!

div#header{
	width: 100%;
	background-color: #eee;
	position: relative;
}

div#header h1{
	text-align: center;
	width: 375px;
	height: 50px;
	margin: 50px auto;
	font-size: 220%;
	background: url('../../images/name_logo.png') no-repeat;
}

<div id="header">
	<h1>Title</h1>
	<ul id="navbar"></ul>
</div>

overflow:autoebeveyn koy div
bu bağlantıda daha fazlasını gör

Ben bunun neden böyle sağlam bir açıklama yok, ama ben değiştirerek bu giderdikten top-marginiçin top-paddingveya eklemedisplay: inline-block elemanı stiline.

EDIT: Bu benim teorim

Kenar boşluklarının nasıl daraltıldığıyla (bir araya getirilerek) bir ilgisi olduğunu hissediyorum.

dan W3C Çöken Marginler :

Bu spesifikasyonda, daralan kenar boşlukları ifadesi, iki veya daha fazla kutunun (yan yana veya iç içe olabilir) bitişik kenar boşluklarının (boş olmayan içerik, dolgu veya sınır alanları veya bunları ayıran boşluk yoktur) tek bir kenar boşluğu oluşturmak için birleştiği anlamına gelir. .

Benim teorim, ilk elementiniz gövdenin yanında olduğundan, iki kenarın birleştiği ve gövdeye uygulandığı: bu, gövde içeriğini kutu modeline uygun olarak uygulanan daraltılmış kenar boşluğunun altında başlamaya zorlar. .

Kenar boşluklarının daralmadığı ve bunlarla oynamaya değer olabilecek durumlar vardır (Daralan Kenar Boşluklarından ):

* floated elements
* absolutely positioned elements
* inline-block elements
* elements with overflow set to anything other than visible (They do not collapse margins with their children.)
* cleared elements (They do not collapse their top margins with their parent block’s bottom margin.)
* the root element

Bu, üst-alt öğeler arasında kenar boşluğu daralmasını önlemenin yollarından bazılarıdır. Stilinizin geri kalanına daha uygun olanı kullanın:

• Set displaydiğerinden daha hiç block.
• Set floatdiğerinden daha hiç none.
• Kenar boşluğunu kaldırın ve bunun yerine kullanın padding. Örneğin, varsa margin-top: 10px, ile değiştirin padding-top: 10px;.
• Kenar boşluğunu kaldırın ve bunun yerine position( absoluteveya relative) özelliklerle birlikte kullanın top,bottom sen olsaydı, vb Örneğin margin-top: 10px, ile değiştirin position: relative; top: 10px;.
• Kenar boşluklarının daraldığı tarafa a paddingveya a ekleyin border. ana öğeye . Kenarlık 1 piksel ve şeffaf olabilir.
• Set overflowdışında bir seçeneğe visibleiçin ebeveyn elemanı.

Bunun eski bir sorun olduğunu biliyorum, birçok kez karşılaştım. Sorun şu ki, buradaki tüm düzeltmeler, potansiyel olarak istenmeyen sonuçlara yol açabilecek hackler.

Öncelikle, kök sorununun kolay bir açıklaması var. Kenar boşluğu daraltmanın çalışma şekli nedeniyle, bir konteynerin içindeki ilk öğenin bir üst kenar boşluğu varsa, bu üst kenar boşluğu üst kapsayıcının kendisine etkin bir şekilde uygulanır. Aşağıdakileri yaparak bunu kendi başınıza test edebilirsiniz:

<div>
    <h1>Test</h1>
</div>

Bir hata ayıklayıcıda, bunu açın ve div'in üzerine gelin. Div'in kendisinin aslında H1 öğesinin üst kenar boşluğunun durduğu yere yerleştirildiğini fark edeceksiniz. . Bu davranış, tarayıcı tarafından amaçlanmıştır.

Bu yüzden, tuhaf saldırılara başvurmak zorunda kalmadan bunun kolay bir çözümü var, buradaki yayınların çoğunda olduğu gibi (hakaret amaçlanmadı, sadece gerçek) - sadece orijinal açıklamaya geri dönün - ...if the first element inside a container has a top margin...- Bunu takiben, bu nedenle ihtiyacınız olacak bir kaptaki ilk öğe DEĞİL üst kenarı . Tamam, ama bunu anlamsal olarak belgenize müdahale etmeyen öğeler eklemeden nasıl yaparsınız?

Kolay! Sözde elemanlar! Bunu bir sınıf veya önceden tanımlanmış bir mixin aracılığıyla yapabilirsiniz. :beforeSözde öğe ekleyin :

Bir sınıf aracılığıyla CSS:

.top-margin-fix:before {   
    content: ' ';
    display: block;
    width: 100%;
    height: .0000001em;
}

Bununla, yukarıdaki biçimlendirme örneğini izleyerek div'inizi şu şekilde değiştirirsiniz:

<div class="top-margin-fix">
    <h1>Test</h1>
</div>

Bu neden işe yarıyor?

Bir kaptaki ilk öğe, üst kenar boşluğu yoksa, sonraki öğenin üst kenar boşluğunun başlangıç ​​konumunu ayarlar. Bir :beforesözde öğe ekleyerek , tarayıcı aslında daha önce üst kapsayıcıya anlamsal olmayan (başka bir deyişle, SEO için iyi) bir öğe ekler. ilk öğenizden .

S. Neden yükseklik: .0000001em?

A. Tarayıcının kenar boşluğunu aşağı itmesi için bir yükseklik gereklidir. Bu yükseklik etkili bir şekilde sıfırdır, ancak yine de üst kapsayıcıya dolgu eklemenize izin verecektir. Etkili olarak sıfır olduğu için, konteynerin düzeni üzerinde de bir etkisi olmayacaktır. Güzel.

Artık öğelerinizle başka şeyler yapmak istediğinizde beklenmedik sonuçlara neden olacak garip görüntü stilleri eklemek yerine, bu sorunu çözmek için bir sınıf (veya daha iyisi, SASS / LESS'te bir mixin!) ve / veya bu sorunu gerçekten çözmeyi amaçlamayan dolgu veya garip konum / kayan stillerle değiştirme.

display: flexbu durumda çalışacak. Ana öğeyi verin display: flex;ve ardından h1etikete olan gereksiniminize göre marj verin .

Bugün bu sorunla karşılaşın.

overflow: hidden takip ettiğim daha fazla öğe olduğunda beklendiği gibi çalışmadı.

Bu yüzden üst div'in display özelliğini değiştirmeyi denedim ve display: flexçalıştım !!!

Umarım bu birine yardımcı olabilir. :)

Üst öğenin üst kısmına küçük bir dolgu eklemek bu sorunu çözebilir.

.parent{
  padding-top: 0.01em;
}

Örtüşen bir efekt oluşturuyorsanız, üst öğe içinde bir öğenin üst öğenin dışında görünmesine ihtiyacınız varsa bu yararlıdır.

Bu, marj daralması nedeniyle olur. Alt öğe, üst öğenin sınırına dokunduğunda ve bunlardan herhangi biri kenar boşluklarıyla uygulandığında:

1. En büyük marj kazanır (uygulanır).

2. herhangi birinin marjı varsa, o zaman her ikisi de aynı şeyi paylaşacaktır.

Çözümler

1. ebeveyn ve çocuğu ayıran ebeveyne kenarlık uygulayın.
2. ebeveyn ve çocuğu ayıran ebeveyn için dolgu uygulayın.
3. üstte görünmek yerine taşma uygulayın.
4. üst div'de alt ve üst kenar boşluğu uygulanabilen sanal öğe oluşturmak için önce veya sonra kullanın.
5. kenar boşluğu uygulanmış alt öğe ve üst öğe arasında bir html öğesi oluşturup bunları ayırabilir.