Align span tag with html to add edge

Question

I need to perform an image alignment with a span tag and place an edge on that span tag. I was able to align, but it only worked by placing a margin-bottom of 1px. It worked, but I didn’t like the solution. Someone knows another technique to make this alignment?

.rotten-tomatoes-rating {
  width: 120px;
  margin-right: 15px;
}

.rotten-tomatoes-rating img {
  padding: 10px;
  height: 38px;
  margin-bottom: 1px;
  background-color: #ff0740;
}

.imdb-details span, .rotten-tomatoes-rating span {
  padding: 10px;
  color: white;
  font-weight: 600;
  font-size: 12px;
  border: 1px solid #ff0740;
}

<div class="container">
<div class="row col-md-6">
    <div class="rotten-tomatoes-rating">
      <img src="../../assets/2.Logos/logo-rotten-tomatoes.svg">
      <span >{{rottenTomatoesRating}}</span>
    </div>
</div>

Answer 1

You don’t have to use margin-bottom: 1px. CSS has all properties suitable for element alignment. Using margin to fix height, in my view, is to make up the problem.

Put the class .d-flex in the div where are the logo and span to convert into flexbox (test without the d-flex since in your print the two elements are already together. I couldn’t play here exactly like in your print, so I added the class d-flex) and set the span height at the same time as the logo, ie, height: 38px;. This way the two elements will have the same height.

How Bootstrap applies by default box-sizing: border-box on all elements, span borders will not be summed in the width and height of the element. With this the logo will not be higher than span. See:

body{
   background: black!important;
}

.rotten-tomatoes-rating {
  width: 120px;
  margin-right: 15px;
}

.rotten-tomatoes-rating img {
  padding: 10px;
  height: 38px;
  background-color: #ff0740;
}

.imdb-details span, .rotten-tomatoes-rating span {
  padding: 10px;
  color: white;
  font-weight: 600;
  font-size: 12px;
  border: 1px solid #ff0740;
  height: 38px;
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<div class="container">
   <div class="row col-md-6">
      <div class="rotten-tomatoes-rating d-flex">
         <img src="https://icon2.cleanpng.com/20180619/fkv/kisspng-plum-tomato-bush-tomato-rotten-tomatoes-film-5b2942a0b53671.1232091215294306887423.jpg">
         <span>100%</span>
      </div>
   </div>
</div>