<br>'S ile alt paragraflara bölünmüş metin büyük bir paragraf var :

<p>
  Blah blah blah.
  <br/>
  Blah blah blah. Blah blah blah. Blah blah blah.
  <br/>
  Blah blah blah.
</p>

Bu alt paragraflar arasındaki boşluğu genişletmek istiyorum <br>. Bunu yapmanın doğru yolunu kullanmak olduğunu biliyorum <p></p>, ama şu anda bu düzeni değiştiremiyorum, bu yüzden sadece CSS çözümü arıyorum.

Ben ayarı denedim <br>'ın line-heightve heightbirlikte display: block, ben de kısaca Googled ve yığın taşması-ed, ancak herhangi bir çözüm bulamadık. Bu, düzeni değiştirmeden bile mümkün mü?

css:

br {
   display: block;
   margin: 10px 0;
}

Çözüm muhtemelen tarayıcılar arası uyumlu değildir, ancak en azından bir şeydir. Ayrıca line-heightşunları da ayarlamayı düşünün :

line-height:22px;

Google Chrome için şunları ayarlamayı düşününcontent :

content: " ";

Bunun dışında, bir JavaScript çözümü ile sıkışıp kaldığınızı düşünüyorum.

İşte doğru çözümdür aslında çapraz tarayıcı desteği vardır:

  br {
        line-height: 150%;
     }

Yani, yukarıdaki peeplerin temel olarak benzer bir cevabı var, ama burada çok özlü. Opera, Chrome, Safari ve Firefox'ta çalışıyor, büyük olasılıkla IE de mi?

br {
            display: block; /* makes it have a width */
            content: ""; /* clears default height */
            margin-top: 0; /* change this to whatever height you want it */
}

Başka bir yol İK kullanmaktır . Ancak, işte kurnaz kısım, görünmez olmasını sağlayın.

Böylece:

<hr style="height:30pt; visibility:hidden;" />

HR kullanarak simüle edilmiş daha temiz bir BR molası yapmak için: Btw tüm tarayıcılarda çalışır !!

{ height:2px; visibility:hidden; margin-bottom:-1px; }

Gibi bildiğim kadarıyla <br>yok olması bir yüksekliğe, bu sadece bir satır sonu zorlar. Sahip olduğunuz şey, alt paragrafları değil , otomatik sarma olanlara ek olarak bazı satır sonları içeren bir metindir . Satır aralığını değiştirebilirsiniz, ancak bu tüm satırları etkiler.

Sadece bu problemi yaşadım ve

<div style="line-height:150%;">
    <br>
</div>

bu <p>öğeye çizgi yüksekliği uygulayabilirsiniz , böylece çizgiler büyür.

Daha önce :before/ :afterCSS2 sözde öğesini denemedim, çünkü sadece IE8'de destekleniyor (IE tarayıcıları ile ilgili) . Bu olası tek CSS çözümü olabilir:

br:before {
    display: block;
    margin-top: 10px;
    content: "";
}

İşte bir olan örnek üzerinde QuirksMode .

Kullanabileceğinizi düşündüm:

br:after {
    content: ".";
    visibility: hidden;
    display: block;
}

Ancak bu, krom veya firefox'ta işe yaramadı.

Sadece kimsenin başına gelmesi ihtimaline değineceğimi düşündüm ve onlara sıkıntıyı kurtaracağım

br {   
    content: "";
    margin: 2em;
    display: block;
    margin-bottom: -20px; 
 }

Firefox, Chrome ve Safari'de çalışır. Explorer'da test etmedim. (Windows tabletin gücü tükendi.)

Satır kesmeleri, yazı tipi boyutu Firefox ve Safari'de farklı çalışır.

İlginçtir, break etiketi aşağıdaki gibi tam formda yazılırsa:

<br></br>

sonra CSS satır yüksekliği:% 145 çalışır. Kesme etiketi şu şekilde yazıldıysa:

<br> or 
<br/> 

en azından Chrome, IE ve firefox'ta çalışmaz. Tuhaf!

Benim için işe yarayan, paragraf etiketleri arasına bu satır içi eklemektir ... ama en iyi çözüm değil.

<br style="line-height:32px">

-------- Düzenle ---------

Bu ile PC / Mac ile ilgili sorunlar yaşadım ... Metne yeni satır yüksekliği verir, ancak satır sonunu yapmaz ... Bazı testleri kendiniz yapmak isteyebilirsiniz. Afedersiniz!

<hr>Etiketi bir yerde önerildiği gibi kullanmanın etiketi sona erdireceğini <p>unutmayın, bu yüzden bu çözümü unutun.
F.ex. çevrede bir şey stilize edilir , yerleştirildikten <p>sonra içeriğin geri kalanı için bu stil gider <hr>.

İşte IE, Firefox ve Chrome'da çalışan bir çözüm. Fikir, br öğesinin yazı tipi boyutunu 14px'ten 18px'e kadar olan gövde boyutundan artırmak ve öğeyi 4px kadar düşürmek, böylece ekstra boyut metin satırının altında olmalıdır. Sonuç, br'nin 4 piksel altında ekstra boşluktur.

br 
{ 
font-size: 18px; 
vertical-align: -4px; 
}  

GÜNCELLEME 13 Eylül 2019:

<br class=big>İhtiyacım olduğunda büyük bir satır sonu yapmak için kullanıyorum . Bugüne kadar şöyle şekillendirdim:

br.big {line-height:190%;vertical-align:top}

( vertical-align:topYalnızca IE ve Edge için gerekliydi.)

Bu, denediğim tüm önemli tarayıcılarda çalıştı: Chrome, Firefox, Opera, Brave, PaleMoon, Edge ve IE11.

Ancak, son zamanlarda Chrome tabanlı tarayıcılarda çalışmayı durdurdu : "büyük" satır sonlarım normal boyutlu satır sonlarına dönüştü.

(Tam olarak ne zaman kırdıklarını bilmiyorum. 12 Eylül 2019'dan itibaren hala güncel olmayan Chromium Portable 55.0.2883.11'de çalışıyor, ancak Opera 63.0.3368.71 ve Chrome 76.0.3809.132'de (her iki Windows'da da bozuk) ve Android).)

Bazı deneme yanılma işlemlerinden sonra, tüm bu tarayıcıların geçerli sürümlerinde çalışan aşağıdaki yedekle sonuçlandım:

br.big {display:block; content:""; margin-top:0.5em; line-height:190%; vertical-align:top;}

Notlar:

line-height:190% Chrome tabanlı tarayıcıların son sürümleri hariç her şeyde çalışır.

vertical-align:topIE ve Edge için (ile birlikte line-height:190%), kısmen önceki ve kısmen sonra değil, ait olduğu bir önceki çizgiden sonra gelmek için ekstra alan elde etmek için gereklidir.

display:block;content:"";margin-top:0.5em Chrome, Opera ve Firefox'ta çalışır, ancak Edge ve IE'de çalışmaz.

<br>HTML'yi düzenlemeyi düşünmüyorsanız, bir etiketten sonra biraz fazladan dikey boşluk eklemenin alternatif (daha basit) bir yolu , bunun gibi bir şeydir. Tüm tarayıcılarda iyi çalışır:

<span style="vertical-align:-37%"> </span><br>

(Tabii ki, daha büyük veya daha küçük bir boşluk için "% -37" yi gerektiği gibi ayarlayabilirsiniz.) Aşağıda, temayla ilgili diğer varyasyonları içeren bir demo sayfası bulunmaktadır:

https://burtonsys.com/a_little_extra_vertical_space_for_br_tag.html



28 Mayıs 2020:

Demo sayfasını güncelledim; şimdi yukarıdaki tekniklerin tümünü gösterir:

https://burtonsys.com/a_little_extra_vertical_space_for_br_tag.html

Michael ve yoda haklı. Yapabileceğiniz şey, <p>bir blok etiketi olarak, aşağıdaki bloğu dengelemek için bir alt kenar boşluğu kullanan etiketi kullanmaktır, böylece daha büyük boşluk elde etmek için buna benzer bir şey yapabilirsiniz:

<p>
    A block of text.
</p>
<p>
    Another block
</p>

Başka bir alternatif, <hr>aralığın yüksekliğini açıkça tanımlayabileceğiniz blok etiketini kullanmaktır .

<br />metin dolu satırı kadar yer kaplar <p>, bunu değiştiremezsiniz. Daha büyük istiyorsanız, paragrafa ayırmak istediğiniz anlamına gelir, bu yüzden başka ekleyin <p>. Mümkün olan en semantik olmayı unutmayın;)

CSS'deki "block-quote" özelliğini de kullanabilirsiniz. Bu, tek tek satırlarınızı etkilememekte, ancak yalnızca paragraflar veya "tırnak işaretleri arasında" kesmeler için parametreler ayarlamanıza olanak tanır.

GÜNCELLEME:
Düzeltilmiş duruyorum. "blockquote" aslında bir html özelliğidir. Çalışmanızın çevresinde <p> ve </ p> gibi kullanırsınız. Daha sonra css gibi blok teklifiniz için parametreleri ayarlayabilirsiniz

blockquote { margin-top: 20px }

Bu yardımcı olur umarım. Br üzerindeki parametrelerin ayarlanmasına benzer ve çapraz tarayıcı uyumlu olabilir veya olmayabilir.

Bir BR'nin yüksekliğini ayarlayamıyorsunuz, ancak ekranı kullanarak güvenilir bir şekilde yok olmasını sağlayabilirsiniz: yok

Aşağıdakilere çözüm ararken bu sayfaya rastladım:

Üçüncü taraf ödeme ağ geçidinin (Worldpay), yalnızca kendi sayfalarının gövdesine enjekte edilen 10k maksimum CSS ve HTML (komut dosyasına izin verilmez) ile ödeme sayfalarını özelleştirmenize izin verdiği bir durum var ve birkaç BR, FONT etiketi vb. IE7 / 8'i Quirks moduna zorlayan DTD'leriyle birleştiğinde, tarayıcılar arası özelleştirmeyi olabildiğince zorlaştırıyor!

BR'leri kapatmak işleri daha tutarlı hale getirir ...

i Bu yöntemleri kullanın, ancak çapraz tarayıcı olup olmadığını bilmiyorum

================= Yöntem 1 ==================

br {
    display:none;
}

VEYA

================= Yöntem 2 ==================

br {
    display: block;
    margin-bottom: 2px;
    font-size:2px;
    line-height: 2px;
}
br:before {
    display: block;
    margin-top: 2px;
    content: "";
}
br:after {
    content: ".";
    visibility: hidden;
    display: block;
}

VEYA

================= Yöntem 3 ==================

br:after { content: "" }
br { content: "" }

CSS kullanmayı deneyin line-heightsizin üzerinde bağladıkları piçeren etiketi bretiketi. Etiketlerinizi izole etmek istiyorsanız yapabileceğinizi idunutmayın p, ancak bir divizolasyon için IMO kullanmak daha iyi olabilir .

Birisi zaten bunu söyledi, üzgünüm, ama basit bir çözüm "satır yüksekliği" ile etrafında oyuncak etmektir. Satır sonu kullandığınızda çok fazla alan kaplıyorsanız, bunun nedeni satır yüksekliğinizin çok yüksek ayarlanmış olmasıdır. Bunu CSS'de düzeltebilirsiniz (ancak o özelliği kullanan her şeyi etkileyeceğini bilirsiniz) veya CSS'yi geçersiz kılmak için satır içi bir stil yapabilirsiniz.

HTML'yi PDF'ye dönüştürmek ve metni tablo hücrelerine dikey olarak ortalamak için bir çözüm geliştirmek zorunda kaldım, ancak düz girişi girmek dışında hiçbir şey işe yaramadı <br>

Yani, kutunun dışında düşünerek, yazı tipi boyutunu (pt cinsinden) ayarlayarak dikey boyutu değiştirdim.

<font style="font-size: 4pt"><br></font>

<span style="line-height:40px;"><br></span> 

Bu satır içi ve her
öğede yapmanız gerekir, ancak istenen etkiyi elde etmek için çoğu tarayıcıda çizgi yüksekliğiyle çalışmalıdır. Her öğede satır içi yaparsanız, çoğu tarayıcıda ve e-postada çalışmalıdır (ancak burada tartışmak için çok karmaşıktır).

Span etiketi çalışmak için stil aralığı alamadım zaman bu benim için hile yaptı:

        <p style='margin-bottom: 5px' >
            <span>I Agree</span>
        </p>
        <span>I Don't Agree</span>

kullanım <div>

<div>Content 1</div>Content 2

Bu, herhangi bir dikey boşluk olmadan yeni bir çizgiye izin verir.

Bu olur

<div>Content 1</div>Content 2

<br>Etikete bağlı aralıklarla ilgili sorunları çözdüğü için buraya gelen herkes için daha genel bir düzeyde yanıt vermek . Mükemmel piksel yakın almak için bir sürü sıfırlama yapmak zorunda.

br {
    content: " ";
    display: block;
}

Ele aldığım özel konu için satırlar arasında belirli bir boşluk olması gerekiyordu. Üst ve alt kenar boşluğu ekledim.

br {
    content: " ";
    display: block;
    margin: 0.25em 0;
}

IE7'de bir çözüm kombinasyonu kullanarak çalışmayı başardım, ancak esas olarak Br'yi DIV'ye Nigel ve diğerlerinin önerdiği gibi sararak. Id eklendi ve = "sunucu" çalıştırın, böylece onay kutusunu satır onay kutusundan kaldırırken BR kaldırabilirsiniz.

.narrow {
    display: block;
    margin: 0px;
    line-height: 0px;
    content: " "; 
}

<div class="narrow" run at="server"><br></br></div>

İki br etiketi kullanıyor olabilir, tüm tarayıcılarla çalışan en basit çözümdür. Ama tekrarlayıcı.

<p>
content
</p>
<br /><br />
<p>
content
</p>
<br /><br />
<p>
content
</p>

Satır sonu yerine bir paragraf eklemeye ne dersiniz?

bla la la bla bla abla la la bla bla abla la la bla bla bir

Ardından, satır yüksekliğini veya dolgusunu veya bunun için herhangi bir şeyi belirleyebilirsiniz.