html - Custom Button distorts in SPAN tag -

i have generate custom buttons in row. problem when place button class inside of "span" tag, button shape turns round oval. if place inside of "div" tag, displays fine, not in row.

here css:

.dashboard-button-green{     height: 27px;     width: 27px;     background-color: #72a017;     border-radius: 50%;     text-align:center;     text-decoration:none;     font-size: 8pt;     font-weight:bold;     margin: 5px 10px 5px 5px;    top:10px;    padding-top: 12px;    padding-left: 10px;    padding-right: 2px;    color:white; } 

here html:

<div ng-app="mymodule" ng-controller="contractorctrl">               <span class="dashboard-button-green">70%</span> <span><img src="~/images/contractorwidget/red_cross.png" /></span>             </div> 

this how renders:

the image on left should image on right. tried changing line-height, didn't help.

any assistance appreciated!

it's because span tag inline. need add display: inline-block span behave more button.