Search code examples
htmlcss

When the "display" is changed, the blocks are arranged in a column, and the margins are constantly displayed on the right

The problem is with images that do not respond to display changes in the code, i.e. so that they are in one line and on the same level in a common row, but when using inline-block in conjunction with flex, the blocks are moved, since they have a strange "wall" on the right: enter image description here

I used many options for display, such as inline-block, block, and flex. In fact, it's this indentation that gets in the way, but it doesn't get removed in any way. The problem is not solved. I can't find a solution anywhere.

This is how it looks in general: enter image description here

and it is necessary that everything is arranged horizontally, in a row (on the same level).

.bottom {
          margin: 0 auto;
          width: 1440px;
          height: 85px;
          background: #1D0E2D;
          border-radius: 25px;
          opacity: 80%;
          margin-top: 90px;
          margin-bottom: 74px;
        }
    
        .social {
          display: flex;
          color: white;
          font-family: 'SF pro display';
          font-weight: medium;
          font-size: 20px;
          display: inline-block;
        }
    
        .money {
          color: white;
          font-family: 'SF pro display';
          font-weight: medium;
          font-size: 20px;
        }
    
        .social-block {
          display: flex;
          align-items: center;
        }
    
        .social-block img {
          display: inline-block;
        }
    
        .bottom img {
          max-width: 36px;
          margin-left: 12px;
        }

 <div class="bottom">
      <div class="botblock">

        <a class="logo-bottom" href="">
                            <span class="pro">PRO<span class="white">moblox</span></span>
                        </a>

        <div class="social-block">
          <span class="social">Мы в социальных сетях: </span>

          <div class="disc">
            <a class="DISCORD" href="#">
                                    <img src="CSS/img/disc.png" alt="">
                                </a>
          </div>

          <div class="telega">
            <a class="TELEGRAM" href="#">
                                    <img src="CSS/img/teleg.png" alt="">
                                </a>
          </div>

          <div class="vkont">
            <a class="VK" href="#">
                                    <img src="CSS/img/vk.png" alt="">
                                </a>
          </div>

        </div>

        <div class="email-block">
          <span class="money">Для сотрудничества: </span>

          <a class="EMAIL" href="#">
                                <img src="CSS/img/gmail.png" alt="">
                            </a>

        </div>

      </div>
    </div>
Solution

  • In css, set .botblock to be flex to get everything on one line. Then pick a justify-content value that aligns things horizontally the way you like.

    .bottom {
  margin: 0 auto;
  width: 1440px;
  height: 85px;
  background: #1D0E2D;
  border-radius: 25px;
  opacity: 80%;
  margin-top: 90px;
  margin-bottom: 74px;
}

/* EDIT Add flex settings to .botblock */
.botblock {
  display: flex;
  justify-content: space-evenly;
}

.social {
  display: flex;
  color: white;
  font-family: 'SF pro display';
  font-weight: medium;
  font-size: 20px;
  display: inline-block;
}

.money {
  color: white;
  font-family: 'SF pro display';
  font-weight: medium;
  font-size: 20px;
}

.social-block {
  display: flex;
  align-items: center;
}

.social-block img {
  display: inline-block;
}

.bottom img {
  max-width: 36px;
  margin-left: 12px;
}
    <div class="bottom">
  <div class="botblock">

    <a class="logo-bottom" href="">
      <span class="pro">PRO<span class="white">moblox</span></span>
    </a>

    <div class="social-block">
      <span class="social">Мы в социальных сетях: </span>

      <div class="disc">
        <a class="DISCORD" href="#">
          <!-- EDIT For code snippet -->
          <!-- <img src="CSS/img/disc.png" alt=""> -->
          <img src="https://placebear.com/32/32.jpg" alt="">
        </a>
      </div>

      <div class="telega">
        <a class="TELEGRAM" href="#">
          <!-- EDIT For code snippet -->
          <!-- <img src="CSS/img/teleg.png" alt=""> -->
          <img src="https://placebear.com/33/32.jpg" alt="">
        </a>
      </div>

      <div class="vkont">
        <a class="VK" href="#">
          <!-- EDIT For code snippet -->
          <!-- <img src="CSS/img/vk.png" alt=""> -->
          <img src="https://placebear.com/34/32.jpg" alt="">
        </a>
      </div>

    </div>

    <div class="email-block">
      <span class="money">Для сотрудничества: </span>

      <a class="EMAIL" href="#">
        <!-- EDIT For code snippet -->
        <!-- <img src="CSS/img/gmail.png" alt=""> -->
        <img src="https://placebear.com/35/32.jpg" alt="">
      </a>

    </div>

  </div>
</div>