CODEWITHSUNDEEP
htmlcss
Buisson
Buisson

Reputation: 539

margin between 2 span

I have the following code :

<div class='relative'>
    <span>MyText</span><br>
    <span class="btnFavorit btnViolet" idp="005626">
            <span class="l">&nbsp;</span><span class="c"> <img class="imageOff" src="./charte/base/mesCourses/pictoFavorit.png"><img class="imageOn" src="./charte/base/mesCourses/pictoFavoritOn.png">BUTTON</span><span class="r">&nbsp;</span>
            </span>
    </span>
</div>

I would like to put a margin bottom on the first span to have a space between the text and my button (made by span) . How I can do it (For me I think I will use other
but I don't know if I can use CSS for this)

Upvotes: 1

Views: 1208

Answers (5)

changtung
changtung

Reputation: 1624

You can have more space between these spans. You can set css rule to do it: 

br { 
line-height:10px;
}

or 

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

That would change all brs in your page. Add class to br in order to have css specific in only one place: 

<span>MyText</span><br class="gap">

and then you use css: 

br.gap { 
margin: 15px 0;
display: block;
}

Upvotes: 1

Choco
Choco

Reputation: 1064

Use some thing like this..

<style>
.relative span:first-of-type { display:inline-block;margin-bottom:10px; }
</style>

Upvotes: 0

Frederik Witte
Frederik Witte

Reputation: 1345

The span tag should be used for inline elements ONLY. Best solution would be to change MyText span to a div, as this is your desired effect. 

<div>MyText</div>

Upvotes: 0

Rahul
Rahul

Reputation: 5774

Just add class to first span, give it a display property as inline-block or block and put margin :-)

.textSpan{
    display:inline-block;
    margin-bottom:5px; /*increase if you want*/
}

Why only margin does not work for span? Span element is inline unlike block elements like p, div hence you need to specifically give it a custom display property like block or inline-block

http://jsfiddle.net/wk483kzL/

Upvotes: 0

fallenland
fallenland

Reputation: 525

This should work

.relative span { display: inline-block; }
.relative span:first-child { margin-bottom: 10px; }

Upvotes: 5

Related Questions