CSS kullanarak <br/> (br etiketi) nasıl simüle edebilirim?

Question

Burada css ve html aşağıdaki satırı vardır:

CSS:

.top, .title { 
font-weight: bold; 
} 
.bottom, .Content { 
} 

HTML:

<span class='title'>Title</span> 
<br/> 
<span class='Content'>Content</span> 
<br/><br/> 

Ben, CSS konusunda eşdeğer <br/> etiketi değiştirmek istiyorum ama Onunla mücadele ediyorum. Herhangi bir yardım için minnettar olurum.

Kenar boşluğu, kenar boşluğu, çizgi yüksekliği denedim, hiçbiri işe yaramadı. gibi span üzerinde

Answer 1

<span> bir satır içi unsurdur, yani margin uygulamış olamaz, ama o padding alabilir - it .title { padding: 10px 0; } gibi bir şey vermek ve bir paragraf taklit edeceğiz, ya da sadece .title { display: block; } altındaki gitmek sonraki şey zorlamak için.

Answer 2

kullanım display:block;,

:

.title, .Content { display:block; } 

Answer 3

Eh, sorun bir satır içi etiket bir "yayılma" kullanarak olmasıdır. Örneğin kenar boşluğu kullanabilmek için blok elemanı kullanmalısınız.

.top { 
    font-weight: bold; 
    display: block; 
} 
.bottom { 
    display: block; 
} 

Ya da ekranı kullanabilirsiniz:

Bunu deneyebilirsiniz inline blok;

Answer 4

display: block; ancak, <span>, semantik olarak muhtemelen kullanılacak yanlış etikettir (bir blok etiketinden ziyade bir satır içi etiket olması); <div> muhtemelen daha iyi bir eşleşmedir ve zaten bir blok olarak görüntülediği bonus ile birlikte gelir. Diğer etiketler daha uygun olabilir.

Answer 5

Semantik olarak, başlık için bir başlık etiketi (h1, h2, vb.) Ve içerik için bir paragraf etiketi (p) kullanmak istersiniz. Bunların her ikisi de blok seviyeli elemanlardır, bunun için margin ve line-height gibi işler çalışır.

A span etiketi, (tüm amaçlar ve amaçlar için), etiketin geri kalanını karıştırmadan, blok düzeyindeki bir öğenin ortasında gitmesi gerektiği anlamına gelen satır içi bir öğedir.

Gerçekten de bir açıklıkla kalmak istiyorsanız, yayılma alanını CSS özelliğine display: block vererek blok düzeyindeki bir öğe gibi davranmaya zorlayabilirsiniz. Yine de, h1 veya p etiketleri gibi gerçek blok düzeyindeki öğeleri kullanmanızı öneririm.

Answer 6

WordPress ile çalışırken benzer bir probleme sahiptim. Wordpress, bir blog makalesi için kullanıcının metninden biçimlendirme karakterlerini otomatik olarak kaldırmak için kötüye kullanılır. Benim meydan okumam, makale metnini ortalamak ve çizgiyi ikiye bölmek oldu.

Bu ne yaptım:

<merkezini> Bu > WordPress Makale Başlığı Hattı </div > </center >

eylem benim < div görüntülenmesini istediğiniz çok uzun bir başlık çizgidir <merkezi>, oldukça açıklayıcıdır. <div>, blok düzeyindeki bir öğe olduğundan, yeni bir satır yayımlar.

Bu yardımcı olur umarım.

Answer 7

Böyle BR etiketleri genişlik CSS simüle edebilirsiniz:

span:after { 
    content: ' '; 
    display: block; 
} 

kullanın seçici ": önce" sen "br" gerekirse yayılma içeriği

jsfiddle

Answer 8

<style> 
p.break{ 
    display:block; 
    clear: both; 
} 
</style> 

önce simüle edilmiş