CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Daniel Kobe
Daniel Kobe

Reputation: 9825

Separately adjusting the height of 2 span elements in div

My Code

<div id="open-toolkit">
     <span class="glyphicon glyphicon-briefcase" style="margin-right: 4px; font-size: 18px;"></span>
     <span class="glyphicon glyphicon-chevron-right" style="font-size: 12px">     </span>
</div>

Here is my JSFiddle https://jsfiddle.net/danielyaa5/m2q9aLoa/2/
I want to move the right-chevron icon upward but I cant seem to do so, adding margin top seems to move the whole row down, same with adding padding.

Upvotes: 0

Views: 62

Answers (5)

gopalraju
gopalraju

Reputation: 2309

Try this:

span{
    display:inline-block;
    vertical-align:middle;
}

https://jsfiddle.net/m2q9aLoa/8/

Upvotes: 1

Prime
Prime

Reputation: 3625

https://jsfiddle.net/m2q9aLoa/6/

Method=1

<div>
    <span id="open-toolkit" class="glyphicon glyphicon-briefcase" 
      style="margin-right: 4px; font-size: 18px;"></span>
    <span class="glyphicon glyphicon-chevron-right" 
      style="font-size: 18px;"></span>
</div>

Method=2

<div>
    <span id="open-toolkit" class="glyphicon glyphicon-briefcase" 
       style="margin-right: 4px; font-size: 18px;"></span>
    <span class="glyphicon glyphicon-chevron-right"         
       style="font-size: 12px;top:-2px;position:relative"></span>
</div>

Upvotes: 0

Rahul
Rahul

Reputation: 2071

Use this CSS code snippet.

#open-toolkit span:last-child {
  margin-top: -18px; /* Change the margin-top: .... as your requirement */
  vertical-align: middle;
}

See here: https://jsfiddle.net/m2q9aLoa/7/

Upvotes: 0

Sean Stopnik
Sean Stopnik

Reputation: 1868

Just add position: relative; top: -5px; or however many pixels you want to move it up.

Upvotes: 0

cptstarling
cptstarling

Reputation: 779

What if you do the same with style="overflow: hidden" on the open-toolkit div?

Upvotes: 0

Related Questions