Убрать пробел между пролетами - PullRequest
Новая
       18

Убрать пробел между пролетами

0 голосов
/ 04 августа 2020

Я пытаюсь создать lo go с его заголовком и подзаголовком, но у меня возникла проблема. Я хочу удалить это пространство, чтобы приблизить <span> -s. Вы можете помочь мне? Спасибо!

HTML

<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><br>
      <span class="logo-text" id="logo-subtitle">This is a subtitle</span>
    </div>
  </div>
</div>

CSS / 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

Ответы [ 2 ]

3 голосов
/ 04 августа 2020

Вы должны сначала удалить элемент 'br'.

затем сделать отображение заголовка и подзаголовка block или, как я сделал здесь, сделать родительский дисплей гибким и гибким для столбца чтобы заставить его работать. 

#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>
2 голосов
/ 04 августа 2020

Вам следует избегать <br>

заменять диапазон на 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
...