CODEWITHSUNDEEP
htmlcss
t3cho
t3cho

Reputation: 375

How can I make a "half" row break (<br>)?

If I want to remove the space between rows of two elements separated by a <br> tag, how would I do that? The rows are too close one to other. How can I make like half of the height of the <br> tag?

This is the code used

.tekst {
  font-family: 'Bree Serif', serif;
  color: #2980b9;
}
<span class="tekst">Sie besuchten Düsseldorf als:</span><br>
<select name="posjeta" class="optiontekst">
  <option>- bitte wählen -</option>
  <option>Geschäftsreisende</option>
  <option>Privatperson</option>
</select>
<br><br>

Upvotes: 20

Views: 96600

Answers (8)

Mark Bradley
Mark Bradley

Reputation: 1

<div style="height:3px;"><br></div>

use whatever px you want use in html

example 

<div style="height:5px;"><br></div>

<span style="font-size:3em; color:#ff0000;"> 
<strong>IMPORTANT</strong></span>

<div style="height:10px;"><br></div>

Upvotes: 0

Kalpesh Prajapati
Kalpesh Prajapati

Reputation: 1711

add a margin-bottom span element

OR

add a margin-top to the select element

For example:

.tekst {
     margin-bottom: 10px;
}

OR

.optiontekst {
    margin-top: 10px;
}

Upvotes: 0

Amar Kumar
Amar Kumar

Reputation: 2646

This worked for me:-

<p style="margin:10px;"></p>

Upvotes: 7

Chuck Bevitt
Chuck Bevitt

Reputation: 565

If you only want to do it in one place, you can apply line-height directly to the
element as: <br style="line-height: 10px" />

Upvotes: 15

J Prakash
J Prakash

Reputation: 1333

HTML : 

<span class="tekst">Sie besuchten Düsseldorf als:</span>
    <select name="posjeta" class="optiontekst">
        <option>- bitte wählen -</option>
        <option>Geschäftsreisende</option>
        <option>Privatperson</option>
    </select>
    <br><br>

CSS : 

.tekst{
    font-family: 'Bree Serif', serif;
    color: #2980b9;
    margin-bottom: 10px;
    padding-bottom: 10px;
    }

Try this code it will work for you.

Upvotes: 0

web-tiki
web-tiki

Reputation: 103790

You can use margins :

DEMO

HTML :

 <span class="tekst">Sie besuchten Düsseldorf als:</span>
<select name="posjeta" class="optiontekst">
    <option>- bitte wählen -</option>
    <option>Geschäftsreisende</option>
    <option>Privatperson</option>
</select>
<br>
<br>

CSS :

.tekst {
    font-family:'Bree Serif', serif;
    color: #2980b9;
    display:block;
    margin-bottom:10px;   /* adapt the margin value to the desire space between span and select box */
}

Upvotes: 3

Syx
Syx

Reputation: 505

The <br> tag just adds in a standard line break to the document. You can adjust the size of the <br> element in your CSS:

  br {
    line-height: 10px;
 }

Or you can use a trick with <hr>; setting the height and making it invisible

<hr style="height:10px; visibility:hidden;" />

Upvotes: 29

jcaron
jcaron

Reputation: 17710

A few options:

  • add a margin-bottom or padding-bottom to the element on top
  • add a margin-top to the select

There are probably many other possibilities to achieve this.

Upvotes: 6

Related Questions