Как выровнять интерльяж между блоками?

225

21 апреля 2017, 18:20

Есть 2 блока в футере: в первом - список меню, а во втором - сплошной текст адреса. Как сделать так, чтобы интерлиньяж текста стал равный меню (не наоборот) Варианты с приблизительными line-height не предлагать, я и сам знаю как. Меня устроит решение только с равными интерлиньяжными отступами. Фидл

.footer-widgets.col-4 .block { 
    width: 43.4782608696%; 
    float: left; 
    margin-right: 4.347826087%; 
} 
.widget_nav_menu ul li { 
    margin-bottom: .6180469716em; 
}

<div class="footer-widgets col-4 fix"> 
  <div class="block footer-widget-3"> 
    <div id="nav_menu-5" class="widget widget_nav_menu"><span class="gamma widget-title">Информация</span> 
      <div class="menu-futer-3-container"> 
        <ul id="menu-futer-3" class="menu"> 
          <li id="menu-item-308" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-308"><a href="http://#">Гарантия и сервис</a></li> 
          <li id="menu-item-309" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-309"><a href="http://#">Карта сайта</a></li> 
          <li id="menu-item-310" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-310"><a href="http://#">Корзина</a></li> 
        </ul> 
      </div> 
    </div> 
  </div> 
 
  <div class="block footer-widget-4"> 
    <div id="text-3" class="widget widget_text"><span class="gamma widget-title">Контакты</span> 
      <div class="textwidget"> 
        <p>Какой-то адрес тра-м-па-пам, Республика Папуа Новая Гвинея, индекс 3436432, планета земля</p> 
      </div> 
    </div> 
  </div> 
 
 
</div>

Answer 1

Если убрать все margin с пунктов, то все задается четко с помощью line-height, не надо ничего приблизительно подбирать.

.widget_nav_menu ul li {
    margin:0; /*Здесь убрал отступ*/
}
.widget_nav_menu ul li, .footer-widget-4 p{
    line-height: 30px; /*поставил сколько надо в px, чтобы не влияла высота шрифтов*/
}

Что касается мистического интерлиньяжа, такого в CSS в строчных элементах (не блоковых) нет.

Рабочий пример на вашей основе:

.footer-widgets.col-4 .block { 
    width: 43.4782608696%; 
    float: left; 
    margin-right: 4.347826087%; 
} 
.widget_nav_menu ul li { 
    margin:0; 
} 
.widget_nav_menu ul li, .footer-widget-4 p{ 
    line-height: 30px; 
}

<div class="footer-widgets col-4 fix"> 
  <div class="block footer-widget-3"> 
    <div id="nav_menu-5" class="widget widget_nav_menu"><span class="gamma widget-title">Информация</span> 
      <div class="menu-futer-3-container"> 
        <ul id="menu-futer-3" class="menu"> 
          <li id="menu-item-308" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-308"><a href="http://#">Гарантия и сервис</a></li> 
          <li id="menu-item-309" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-309"><a href="http://#">Карта сайта</a></li> 
          <li id="menu-item-310" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-310"><a href="http://#">Корзина</a></li> 
        </ul> 
      </div> 
    </div> 
  </div> 
 
  <div class="block footer-widget-4"> 
    <div id="text-3" class="widget widget_text"><span class="gamma widget-title">Контакты</span> 
      <div class="textwidget"> 
        <p>Какой-то адрес тра-м-па-пам, Республика Папуа Новая Гвинея, индекс 3436432, планета земля</p> 
      </div> 
    </div> 
  </div> 
 
 
</div>