Как правильно расположить элемент?

Question

[Antoshkaplehanov]

Всем привет!
Мне нужно чтобы заголовок был с отступом в 25px слева от логитипа:

Проблема такая:

Пробывал прописывать блоку с логотипом float:left.
Результат:

margin-left не срабатывает при флоате.

Исходный код:
https://codepen.io/anon/pen/zwjqqd

И ещё, как другие элементы будет правильнее расположить (как на первой картинке)?
Заранее спасибо!:)

Comments

[Сергей delphinpro]

margin-left работает, посмотрите в девтулзах
задайте тексту line-height равный высоте картинки

[Сергей delphinpro]

<div class="logo">
 <span class=logo__image><img></span>
 <span class=logo__text>Lipsum</span>
</div>

.logo {}
.logo__image, logo__text {
  display: table-cell;
  vertical-align: middle;
}
.logo__text { padding-left: 20px; }

Answer 1

[Screamie Di]

Замените в вашем Codepen и заведется. Если требуется объяснение - пишите.

.logo {
	width:73px;
	height:56px;
	margin-left:35px;
	margin-top:42px;
  margin-right:25px;
	background: #222222 url("../img/logo.png") no-repeat;
	float:left;
}
h1 {
	color:#3c3c3c;
	font-family:"Helvetica CE Regular";
	font-size:34px;
  height: 56px;
  line-height: 56px;
  margin-top: 42px;
}

Answer 2

[Иван Вишневский]

Уже 2017 год на дворе, пришло время использовать flexbox. Кодепен, кстати, сломался от вашего "исходного кода" :)
Ну и да, чтобы два блока рядом расположить, нужно обоим сделать класс inline-block, только всё-таки лучше флексбокс.

Answer 3

[Константин Земляков]

margin-top для h1 добавь просто