Make a half row break

Question

If i want to remove the space between rows of those two element's how would i do that. Example:

Example 1 http://pokit.org/get/img/6be8921b47ff746c1bf297cf87ab0950.jpg

If i remove the   it would be like this then this is how it looks like:

Example 2 http://pokit.org/get/img/1924cb8a9b344bb4f4eda1a98760fd3e.jpg

The rows are to close one to other. I wonder how can i make like half of the   tag . If you understand my question ?

The space between two rows should be less than in example 1. but higher then in example 2.

This is code used

    <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>

And the class tekst

.tekst{
    font-family: 'Bree Serif', serif;
    color: #2980b9;
    }

I know i didn't explained well but i tried my best.

While you're at it, might as well make the `` a label instead: `` and ` — misterManSam, Jun 28 '14 at 14:58

score 27 · Accepted Answer · answered Jun 28 '14 at 12:59

27

The   tag just adds in a standard line break to the document. You can adjust the size of the   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;" />

answered Jun 28 '14 at 12:59

Syx

485
3
10

I like what you did with `
`, now I don't have to change all my line breaks :) – Cardinal System Nov 19 '17 at 18:09
Awesome Possum!! – Ken Sep 09 '19 at 23:34

score 12 · Answer 2 · answered Jan 25 '17 at 17:56

12

If you only want to do it in one place, you can apply line-height directly to the
element as:  

answered Jan 25 '17 at 17:56

Chuck Bevitt

535
4
13

1

I like this answer too - did not know you could do that with the , tag – Ken Sep 09 '19 at 23:35

score 6 · Answer 3 · answered Jun 28 '14 at 12:58

6

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.

answered Jun 28 '14 at 12:58

jcaron

17,302
6
32
46

1

yes - or even a simple 'blank' block level div between would also work -
Hopefully the user already has defined divs and can use those already in use. – B. Shea Oct 05 '18 at 17:38

score 6 · Answer 4 · answered Nov 06 '21 at 08:55

6

This worked for me:-

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

answered Nov 06 '21 at 08:55

Amar Kumar

2,392
2
25
33

Note one should use a value of `.5em` for `half of the
tag` as OP mentioned. – dw1 Feb 01 '22 at 08:28
This is good as it works on safari too. – Michael Jul 08 '22 at 15:03

score 3 · Answer 5 · answered Jun 28 '14 at 13:00

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 */
}

score 2 · Answer 6 · answered Jun 28 '14 at 13:06

2

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;
}

answered Jun 28 '14 at 13:06

Kalpesh Prajapati

1,703
1
12
15

score 0 · Answer 7 · answered Jun 28 '14 at 13:01

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.

Make a half row break

7 Answers7

Linked