renovations

8-css-for-js/12-space-under-img/article.md

@@ -16,12 +16,12 @@
 </table>
 ```
 
-[iframe src="inline"]
+[iframe src="inline" height=80]
 
 Посмотрите внимательно! Вы видите расстояние между рамками снизу? Это потому, что **браузер резервирует дополнительное место под инлайновым элементом, чтобы туда выносить "хвосты" букв**.
 
 Вот так выглядит та же картинка с выступающим вниз символом рядом:
-[iframe src="inline-p"]
+[iframe src="inline-p" height=80]
 
 В примере картинка обёрнута в красный `TD`. Таблица подстраивается под размер содержимого, так что проблема явно видна. Но она касается не только таблицы. Аналогичная ситуация возникнет, если вокруг `IMG` будет другой элемент с явно указанным размером, "облегающий" картинку по высоте. Браузер постарается зарезервировать место под `IMG`, хотя оно там не нужно.
 
@@ -45,7 +45,7 @@
 </table>
 ```
 
-[iframe src="block"]
+[iframe src="block" height=80]
 
 Под блочным элементом ничего не резервируется. Проблема исчезла.
 
@@ -75,17 +75,17 @@
 </table>
 ```
 
-[iframe src="valign"]
+[iframe src="valign" height=80]
 
 А вот, как браузер отобразит соседние символы в этом случае: `p<img src="square.png">p`
 
-[iframe src="valign-p"]
+[iframe src="valign-p" height=80]
 
 С другой стороны, сама строка никуда не делась, изображение по-прежнему является её частью, а браузер планирует разместить другое текстовое содержимое рядом, хоть и сверху. Поэтому если изображение маленькое, то произойдёт дополнение пустым местом до высоты строки:
 
 Например, для `<img src="square.png" style="height:10px">`:
 
-[iframe src="valign-small"]
+[iframe src="valign-small" height=80]
 
 Таким образом, требуется уменьшить еще и `line-height` контейнера. Окончательное решение для маленьких изображений с `vertical-align`:
 
@@ -108,7 +108,7 @@
 
 Результат:
 
-[iframe src="valign-small-lh"]
+[iframe src="valign-small-lh" height=80]
 
 ## Итого