<link href='https://fonts.googleapis.com/css?family=Fira+Sans' rel='stylesheet' type='text/css'>

<p>Цей приклад показує як працює властивість <code>display</code>. Спробуйте вимкнути/ввімкнути перемикач, щоб змінити метод обобки переповнення контенту по вертикалі в блоці нижче.</p>

<div class="inputs">
  <input id="block" checked name="display" type="radio"/>
  <label for="block">block</label>
  <message for="block">Елемент показується як блоковий.</message>
  
  <input id="none" name="display" type="radio"/>
  <label for="none">none</label>
  <message for="none">Приховує елемент. Макет формується, немов елемента і не було.</message>
  
  <input id="inline" name="display" type="radio"/>
  <label for="inline">inline</label>
  <message for="inline">Елемент відображається як рядковий. Значення скасовує особливість блокових елементів завжди починатися з нового рядка.</message>
  
  <input id="inline-block" name="display" type="radio"/>
  <label for="inline-block">inline-block</label>
  <message for="inline-block">Це значення створює блоковий елемент, який поводить себе подібно рядковому елементу. Його внутрішня частина форматується як у блокового елемента, а сам елемент - як рядковий.</message>
</div>

<div class="wm">
  <p id="message">Елемент показується як блоковий.</p>
</div>

<hr>

<div id="box">
  <div class="child">block</div>
</div>

* {
  box-sizing: border-box;
  padding: 0;
}

body {
  font-family: 'Fira Sans', sans-serif;
}

#box {
  margin-top: 25px;
  line-height: 1.45;
  width: 400px;
  height: 150px;
  background-color: gold;
  padding: 4px;
}

.child {
  background-color: #222;
  color: #fff;
  font-weight: 700;
  padding: 16px;
  margin-top: 25px;
}

message {
  display: none;
}

.wm {
  min-height: 100px;
}

var $message = $('#message');

$('.inputs').find('input').on('change', function() {
  
  var $messageText = $("message[for='"+$(this).attr('id')+"']")
  $message.text($messageText.text());
  
  $('#box .child').css('display', $(this).attr('id'));
  $('#box .child').html($(this).attr('id'));
  
});