Clever Geek Handbook

How can I make the words in this button closer to each other?

I have this button here

<w290 "

But I would like to make the words very close together, almost on top of eachother, with the seal icon vertically to the right of them. I've been doing css and html forever and I'm stumped. That's what I have so far

<span id="print-report-btn" class="btn btn-primary btn-mini">
    <span style="float:left;">
        <span style="display: block;padding: 0px;margin: 0px;">Huge</span>
        <span style="display: block;padding: 0px;">Report</span>
    </span>
    <span style="float: right;" style="padding: 0px;">
        <img src="images/icons/print.png" width="23" height="23" />
    </span>
</span>

update: top level classes are boot button styles

+3


source to share


4 answers


play with the property of the line-height

button.

For example:



#print-report-button {
    line-height: 10px;
}
+2


source


Make an image instead of a background image, then you can use a property line-height

to adjust the spacing. It is good practice to place images that are part of the UX in stylesheets, not HTML



+2


source


flex

for parent s align-items: center

to center vertically, then change the line-height to make the text stiffer. I also put your text in one element.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<span id="print-report-btn" class="btn btn-primary btn-mini" style="display: inline-flex; align-items:center;">
    <span>
        <span style="display: block;padding: 0px;margin: 0px; line-height:1;">Huge <br> Report</span>
    </span>
    <span style="padding: 0px;">
        <img src="http://kenwheeler.github.io/slick/img/fonz1.png" width="23" height="23" />
    </span>
</span>
Run codeHide result


+2


source


Try a negative top margin:

<span id="print-report-btn" class="btn btn-primary btn-mini">
    <span style="float:left;">
        <span style="display: block;padding: 0px;margin: 0px;">Huge</span>
        <span style="display: block;padding: 0px;margin: -10px 0 0 0;">Report</span>
    </span>
    <span style="float: right;" style="padding: 0px;">
        <img src="images/icons/print.png" width="23" height="23" />
    </span>
</span>
+1


source






More articles:


All Articles