<h1> etiketlerinden sonraki yeni satır kaldırılıyor mu?


94

<h1>Etiketten sonraki satır sonlarını kaldırmakla ilgili bir sorun yaşıyorum , çünkü her yazdırıldığında, hemen arkasına bir satır sonu ekliyor, bu nedenle şöyle bir şey <h1>Hello World!</h1> <h2>Hello Again World!</h2>yazdırılıyor:

Hello World!

Hello Again World!

CSS'de hangi etiketleri değiştirmem gerektiğinden emin değilim, ancak bunun dolgu veya kenar boşluklarıyla bir ilgisi olmasını bekliyorum

Mümkünse dikey dolguyu da korumak istiyorum.

Yanıtlar:


155

Bunları satır içi olarak biçimlendirmek istediğiniz gibi görünüyor. Varsayılan olarak, h1ve h2satırın tüm genişliğine yayılan blok düzeyindeki öğelerdir. Bunları şu şekilde css ile satır içi olarak değiştirebilirsiniz:

h1, h2 {
    display: inline;
}

İşte arasındaki farkı açıklayan bir makale blockve inlinedaha ayrıntılı olarak: http://www.webdesignfromscratch.com/html-css/css-block-and-inline/

Dikey dolguyu korumak için şu şekilde kullanın inline-block:

h1, h2 {
    display: inline-block;
}

9

<h1>etiketleri {display: block}ayarlandı. Blok düzeyindeki öğelerdir. Bunu kapatmak için:

{display: inline}

varsayılan olarak h etiketleri margin, padding kullanıyor, bu yüzden bunları kaldırmamız gerekiyor
Adeel Mughal

Mümkünse dikey dolguyu da korumak istiyorum, display: inline; 'ı denedim, ancak artık dikey dolgusu yok.
Jack Wilsdon

1
Dolgu ve kenar boşluğunun kaldırılması yeni satırı kaldırmaz. Yeni çizgi, blok düzeyinde öğeler oldukları için ortaya çıkar, yani göründükleri tüm yatay alanı kaplarlar (varsayılan olarak). Bu nedenle, kayan, görüntüyü veya diğer bazı özellikleri değiştirmediğiniz sürece, HER ZAMAN bir h*etiketten sonra yeni bir satırınız olacaktır .
tkone

@JackWilsdon Ben Lee, dikey dolgunun nasıl kolayca korunacağını göstermek için zaten güncellendi, bu yüzden düzenlemenizden sonra ben de benimle uğraşmayacağım.
tkone

3

Html stil bölümünde h1 marj değerini eksi olarak ayarlayarak bu sorunu çözdüm. İhtiyaçlarım için mükemmel çalışıyor.

<style>
h1 { 
    display: block;
    font-size: 0.9em;
    margin-top: -1.91em;
    margin-bottom: -1.91em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}
</style>
<h1 style="text-align:center"> Headline </h1>

2
Bu, satır sonu yerine dikey dolguyu kaldırmak için çalışır.
2016

Bu cevabın aslında aradığım şey olduğunu fark ederken, yanlış şeyi araştırdım. Harika çözüm, sorunun cevabı olmasa da. Yine de teşekkürler! :)
Semmel

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.