TransWikia.com

Блочные элементы "съезжают" вниз при добавлении в них текста

Stack Overflow на русском Asked on November 13, 2021

Сделал 3 блока, в один добавил текст, и заметил, что остальные начали съезжать вниз. Первый съехал чуть-чуть, второй еще больше. Странно, что у меня прописано свойство inline-block, но блоки все равно съезжают вниз при добавлении какого-то материала внутри них. Код внизу

#sitemenu {
  width: 960px;
  height: 540px;
  border: 1px solid black;
  margin: 250px auto 250px auto;
  background-color: white;
}

body {
  background-color: #F2F2F2;
}

#yticon {
  margin-left: 360px;
}

#kompania {
  font-family: calibri;
  font-size: 20px;
  font-weight: bold;
  color: #2E9AFE;
  text-align: center;
}

#kompania1 {
  display: inline-block;
  width: 240px;
  height: 240px;
  border: 1px solid black;
  margin: 100px;
}

#info {
  font-family: calibri;
  font-size: 20px;
  font-weight: bold;
  color: #2E9AFE;
  text-align: center;
}

#info1 {
  display: inline-block;
  width: 240px;
  height: 240px;
  border: 1px solid black;
  margin: -100px;
}

#contacts {
  font-family: calibri;
  font-size: 20px;
  font-weight: bold;
  color: #2E9AFE;
}

#contacts1 {
  display: inline-block;
  width: 240px;
  height: 240px;
  border: 1px solid black;
  text-align: center;
  margin: 100px;
}

#about {
  font-size: 20px;
  color: #BDBDBD;
  font-weight: lighter;
  font-family: calibri;
  padding-left: 75px;
}

#about:hover {
  color: black;
}

#rabota {
  font-size: 20px;
  color: #BDBDBD;
  font-weight: lighter;
  font-family: calibri;
  padding-left: 75px;
}

#rabota:hover {
  color: black;
}

#faq {
  font-size: 20px;
  color: #BDBDBD;
  font-weight: lighter;
  font-family: calibri;
  margin-left: 60px;
}

#faq:hover {
  color: black;
}
<div id="sitemenu">
  <img id="yticon" src="https://placeholdit.co//i/50x50" alt="">

  <div id="kompania1">
    <p id="kompania">Компания</p>
    <p id="about">О нас</p>
    <p id="rabota">Наши работы</p>
  </div>
  <div id="info1">
    <p id="info">Информация</p>
    <p id="faq">FAQ</p>
  </div>
  <div id="contacts1">
    <p id="contacts">Контакты</p>
  </div>
</div>
csshtml

One Answer

Если задача исправить ваше то отключите margin'ы и добавьте видам vertical-align: top

Вот так если немного причесать ваше, выставив в ряд при помощи float: left, но лучше использовать ul+li

#sitemenu {
  width: 960px;
  min-height: 540px;
  border: 1px solid black;
  margin: 0 auto;
  background-color: white;
}

#sitemenu>* {
  float: left;
  margin: 2px;
}

body {
  background-color: #F2F2F2;
}

.logo {
  padding: 30px
}

#sitemenu div {
  width: 240px;
  height: 240px;
  border: 1px solid black;
}

#sitemenu p {
  font-family: calibri;
  font-size: 20px;
  font-weight: bold;
  color: #2E9AFE;
  text-align: center;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

#sitemenu p:hover {
  color: black
}
<div id="sitemenu">
  <img class="logo" src="https://placeholdit.co//i/50x50" alt="">

  <div id="kompania1">
    <p id="kompania">Компания</p>
    <p id="about link">О нас</p>
    <p id="rabota link">Наши работы</p>
  </div>

  <div id="info1">
    <p id="info">Информация</p>
    <p id="faq">FAQ</p>
  </div>
  <div id="contacts1">
    <p id="contacts">Контакты</p>
  </div>
</div>

Вот подправленый ваш

#sitemenu {
  width: 960px;
  height: 540px;
  border: 1px solid black;
  margin: 250px auto 250px auto;
  background-color: white;
}

body {
  background-color: #F2F2F2;
}

#yticon {
  margin-left: 30px;
}

#kompania {
  font-family: calibri;
  font-size: 20px;
  font-weight: bold;
  color: #2E9AFE;
  text-align: center;
}

#kompania1 {
  display: inline-block;
  width: 240px;
  height: 240px;
  border: 1px solid black;
  vertical-align: top
}

#info {
  font-family: calibri;
  font-size: 20px;
  font-weight: bold;
  color: #2E9AFE;
  text-align: center;
}

#info1 {
  display: inline-block;
  width: 240px;
  height: 240px;
  border: 1px solid black;
  vertical-align: top
}

#contacts {
  font-family: calibri;
  font-size: 20px;
  font-weight: bold;
  color: #2E9AFE;
}

#contacts1 {
  display: inline-block;
  width: 240px;
  height: 240px;
  border: 1px solid black;
  text-align: center;
  vertical-align: top
}

#about {
  font-size: 20px;
  color: #BDBDBD;
  font-weight: lighter;
  font-family: calibri;
  padding-left: 75px;
}

#about:hover {
  color: black;
}

#rabota {
  font-size: 20px;
  color: #BDBDBD;
  font-weight: lighter;
  font-family: calibri;
  padding-left: 75px;
}

#rabota:hover {
  color: black;
}

#faq {
  font-size: 20px;
  color: #BDBDBD;
  font-weight: lighter;
  font-family: calibri;
  margin-left: 60px;
}

#faq:hover {
  color: black;
}
<div id="sitemenu">
  <img id="yticon" src="https://placeholdit.co//i/50x50" alt="">

  <div id="kompania1">
    <p id="kompania">Компания</p>
    <p id="about">О нас</p>
    <p id="rabota">Наши работы</p>
  </div>
  <div id="info1">
    <p id="info">Информация</p>
    <p id="faq">FAQ</p>
  </div>
  <div id="contacts1">
    <p id="contacts">Контакты</p>
  </div>
</div>

Answered by Ruslan Semenov on November 13, 2021

Add your own answers!

Ask a Question

Get help from others!

Recent Answers

Recent Questions

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP