Margin span elements

Hey guys. I have a div with two span elements as a children of a div. I want to margin-top first span,but when i do,both of them move. Here is my code.

<div class="reviews">
    <span class="review-icon"></span>
    <span class="review-rating"><b class="bold">4.6</b> Rating <b class="bold-1">72</b> Reviews</span>
</div>

And CSS

.review-icon {
    background-image: url(/img/reviews-io\ 1.png);
    background-repeat: no-repeat;
    display: inline-block;
    width: 15.93px;
    height: 16px;
    margin-top: 20px;
}

.review-rating {
    font-size: 0.75rem;
    line-height: 20px;
}

The margin-top on the inline-block element increases the height of the line and as the text is on the baseline then it moves down with the extra space you created with the margin.

You could set the second span to vertical-align at the top if that’s what you wanted.

.review-rating {
  font-size: 0.75rem;
  line-height: 20px;
  vertical-align:top;
}

Without seeing the actual image and display you require it’s hard to give a definite answer but hopefully the vertical-align:top will solve the problem :slight_smile:

Also please avoid using decimal points in pixels (unless it is for some weird rounding purpose).

width: 15.93px;

Most browsers will round that up to 16px but historically they all did different things.

Just use whole pixels unless you have a good reason and proof that doing otherwise gets you the result you want.

1 Like

Can I suggest that you review the use of the <b> element here, and compare its usage with the more generally preferred <strong> element? You might find that if you are purely intending to use a bold type face, rather than semantically highlighting a level of importance, a <span> might be better employed with CSS used to increase its font-weight.

2 Likes

Thank you guys,it’s working.

1 Like