1
<div class="block">
                    <img src="style/images/photo.png">
                    <h1>Contrary to popular</h1>
                    <p>Lorem Ipsum is not simply random text. It has roots 
                    in a piece </p>
            </div>

Требуемый вид

Я попытался решить данную задачу путем следующим образом:

.block      {
     height: 200px;
     margin: 0;
}
.block img  {
     float:left;
     margin:40px 0px 0px 44px;
}
.block h1 { 
     display:inline;
     margin:50px 0px 0px 25px;
     border: 1px solid black;
}

Но заголовок вовсе не делает отступы от верха блока. Почему это происходит и как это решить?

1 ответ 1

1

Измените display: inline;(margin-top и margin-bottom игнорируются) на display: inline-block;

.block {
  height: 200px;
  margin: 0;
}

.block img {
  float: left;
  margin: 40px 0px 0px 44px;
}

.block h1 {
  display: inline-block;
  margin: 50px 0px 0px 25px;
  border: 1px solid black;
}
<div class="block">
  <img src="http://via.placeholder.com/150x150">
  <h1>Contrary to popular</h1>
  <p>Lorem Ipsum is not simply random text. It has roots in a piece </p>
</div>

2
  • Большое спасибо.
    – korzh
    3 янв 2018 в 20:04
  • @korjunb вы можете поблагодарить автора ответа зелёной галочкой слева от текста ответа
    – andreymal
    3 янв 2018 в 22:52

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.