Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Make a half row break <br>

Tags:

html

css

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

like image 223
t3cho Avatar asked Jun 28 '14 12:06

t3cho


4 Answers

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;" />
like image 175
Syx Avatar answered Oct 17 '22 13:10

Syx


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

like image 37
Chuck Bevitt Avatar answered Oct 17 '22 13:10

Chuck Bevitt


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.

like image 23
jcaron Avatar answered Oct 17 '22 13:10

jcaron


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 */
}
like image 42
web-tiki Avatar answered Oct 17 '22 13:10

web-tiki