删除 span-s 之间的空格

Question

I want to remove this space to make <span> -s closer, but there is no any margin or padding that could add more space between them.

<!-- HTML -->
<div class="service-container" id="logo-title-service-container">
    <span class="logo-text" id="logo-title">company name</span><br>
    <span class="logo-text" id="logo-subtitle">This is a subtitle</span>
</div>

Sass

// Sass
#logo-title-service-container
    text-align: left
    padding-left: 10px
    #logo-title
        font-size: 18px
    #logo-subtitle
        padding-top: -5px
        font-size: 12px

How can I remove the space between them?

Answer 1

You should remove the 'br' element first.

then make the display of title and subtitle block or as i did here make the parent display flex and flex-direction to column to make it work.

 #logo-service-container { width: 100%; text-align: center; padding-top: 15px; display: flex; align-items: center; justify-content: center; } #logo-main { width: 26px; height: 26px; } #logo-title-service-container { display: flex; flex-direction: column; text-align: left; padding-left: 10px; } #logo-title { font-size: 18px; } #logo-subtitle { font-size: 12px; }

 <div class="sidebar" id="left-sidebar"> <div class="service-container" id="logo-service-container"> <img id="logo-main" src="resources/images/icons/logo.svg" alt="logo"> <div class="service-container" id="logo-title-service-container"> <span class="logo-text" id="logo-title">company name</span> <span class="logo-text" id="logo-subtitle">This is a subtitle</span> </div> </div> </div>

Answer 2

You should try to avoid <br>

replace the span with div

<div class="sidebar" id="left-sidebar">
  <div class="service-container" id="logo-service-container">
    <img id="logo-main" src="resources/images/icons/logo.svg" alt="logo">
    <div class="service-container" id="logo-title-service-container">
      <div class="logo-text" id="logo-title">company name</div>
      <div class="logo-text" id="logo-subtitle">This is a subtitle</div>
    </div>
  </div>
</div>

SASS:

#logo-service-container
  width: 100%
  text-align: center
  padding-top: 15px
  display: flex
  align-items: center
  justify-content: center
  #logo-main
    $size: 26px
    width: $size
    height: $size
  #logo-title-service-container
    text-align: left
    padding-left: 10px
    #logo-title
      font-size: 18px
    #logo-subtitle
      padding-top: -5px
      font-size: 12px