renovations
This commit is contained in:
Ilya Kantor
parent
dceccedb58
commit
6ac9e3a500
182 changed files with 275 additions and 324 deletions
119
8-css-for-js/12-space-under-img/article.md
Normal file
119
8-css-for-js/12-space-under-img/article.md
Normal file
|
|
@ -0,0 +1,119 @@
|
|||
# Лишнее место под IMG
|
||||
|
||||
Иногда под `IMG` "вдруг" появляется лишнее место. Посмотрим на эти грабли внимательнее, почему такое бывает и как этого избежать.
|
||||
[cut]
|
||||
## Демонстрация проблемы
|
||||
Например:
|
||||
|
||||
```html
|
||||
<style> * { margin: 0; padding: 0; } </style>
|
||||
<table>
|
||||
<tr>
|
||||
<td style="border:1px red solid">
|
||||
<img src="square.png">
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
```
|
||||
|
||||
[iframe src="inline"]
|
||||
|
||||
Посмотрите внимательно! Вы видите расстояние между рамками снизу? Это потому, что **браузер резервирует дополнительное место под инлайновым элементом, чтобы туда выносить "хвосты" букв**.
|
||||
|
||||
Вот так выглядит та же картинка с выступающим вниз символом рядом:
|
||||
[iframe src="inline-p"]
|
||||
|
||||
В примере картинка обёрнута в красный `TD`. Таблица подстраивается под размер содержимого, так что проблема явно видна. Но она касается не только таблицы. Аналогичная ситуация возникнет, если вокруг `IMG` будет другой элемент с явно указанным размером, "облегающий" картинку по высоте. Браузер постарается зарезервировать место под `IMG`, хотя оно там не нужно.
|
||||
|
||||
## Решение: сделать элемент блочным
|
||||
|
||||
Самый лучший способ избежать этого -- поставить `display: block` таким картинкам:
|
||||
|
||||
```html
|
||||
<style>
|
||||
* { margin: 0; padding: 0; }
|
||||
*!*
|
||||
img { display: block }
|
||||
*/!*
|
||||
</style>
|
||||
<table>
|
||||
<tr>
|
||||
<td style="border:1px red solid">
|
||||
<img src="square.png">
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
```
|
||||
|
||||
[iframe src="block"]
|
||||
|
||||
Под блочным элементом ничего не резервируется. Проблема исчезла.
|
||||
|
||||
## Решение: задать vertical-align
|
||||
|
||||
А что, если мы, по каким-то причинам, *не хотим* делать элемент блочным?
|
||||
|
||||
Существует ещё один способ избежать проблемы -- использовать свойство [vertical-align](http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align).
|
||||
|
||||
**Если установить `vertical-align` в `top`, то инлайн-элемент будет отпозиционирован по верхней границе текущей строки.**
|
||||
|
||||
При этом браузер не будет оставлять место под изображением, так как запланирует продолжение строки сверху, а не снизу:
|
||||
|
||||
```html
|
||||
<style>
|
||||
* { margin: 0; padding: 0; }
|
||||
*!*
|
||||
img { vertical-align: top}
|
||||
*/!*
|
||||
</style>
|
||||
<table>
|
||||
<tr>
|
||||
<td style="border:1px red solid">
|
||||
<img src="square.png">
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
```
|
||||
|
||||
[iframe src="valign"]
|
||||
|
||||
А вот, как браузер отобразит соседние символы в этом случае: `p<img src="square.png">p`
|
||||
|
||||
[iframe src="valign-p"]
|
||||
|
||||
С другой стороны, сама строка никуда не делась, изображение по-прежнему является её частью, а браузер планирует разместить другое текстовое содержимое рядом, хоть и сверху. Поэтому если изображение маленькое, то произойдёт дополнение пустым местом до высоты строки:
|
||||
|
||||
Например, для `<img src="square.png" style="height:10px">`:
|
||||
|
||||
[iframe src="valign-small"]
|
||||
|
||||
Таким образом, требуется уменьшить еще и `line-height` контейнера. Окончательное решение для маленьких изображений с `vertical-align`:
|
||||
|
||||
```html
|
||||
<style>
|
||||
* { margin: 0; padding: 0; }
|
||||
*!*
|
||||
td { line-height: 1px }
|
||||
img { vertical-align: top }
|
||||
*/!*
|
||||
</style>
|
||||
<table>
|
||||
<tr>
|
||||
<td style="border:1px red solid">
|
||||
<img src="square.png" style="height:10px">
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
```
|
||||
|
||||
Результат:
|
||||
|
||||
[iframe src="valign-small-lh"]
|
||||
|
||||
## Итого
|
||||
|
||||
<ul>
|
||||
<li>Пробелы под картинками появляются, чтобы оставить место под "хвосты" букв в строке. Строка "подразумевается", т.к. `display:inline`.</li>
|
||||
<li>Можно избежать пробела, если изменить `display`, например, на `block`.</li>
|
||||
<li>Альтернатива: `vertical-align:top` (или `bottom`), но для маленьких изображений может понадобиться уменьшить `line-height`, чтобы контейнер не оставлял место под строку.</li>
|
||||
</ul>
|
||||
23
8-css-for-js/12-space-under-img/block.view/index.html
Normal file
23
8-css-for-js/12-space-under-img/block.view/index.html
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<style>
|
||||
* { margin: 0; padding: 0; }
|
||||
img { display: block; }
|
||||
</style>
|
||||
<table>
|
||||
<tr>
|
||||
<td style="border:1px red solid">
|
||||
<img src="https://js.cx/clipart/square_50.png" width="50" height="50">
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
20
8-css-for-js/12-space-under-img/inline-p.view/index.html
Normal file
20
8-css-for-js/12-space-under-img/inline-p.view/index.html
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<style> * { margin: 0; padding: 0; } </style>
|
||||
<table>
|
||||
<tr>
|
||||
<td style="border:1px red solid; font-size:120%">
|
||||
<img src="https://js.cx/clipart/square_50.png" width="50" height="50">p
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
20
8-css-for-js/12-space-under-img/inline.view/index.html
Normal file
20
8-css-for-js/12-space-under-img/inline.view/index.html
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<style> * { margin: 0; padding: 0; } </style>
|
||||
<table>
|
||||
<tr>
|
||||
<td style="border:1px red solid">
|
||||
<img src="https://js.cx/clipart/square_50.png" width="50" height="50">
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
20
8-css-for-js/12-space-under-img/valign-p.view/index.html
Normal file
20
8-css-for-js/12-space-under-img/valign-p.view/index.html
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<style> * { margin: 0; padding: 0; } </style>
|
||||
<table>
|
||||
<tr>
|
||||
<td style="border:1px red solid">
|
||||
p<img src="https://js.cx/clipart/square_50.png" width="50" height="50" style="vertical-align:top">p
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<style> * { margin: 0; padding: 0; } </style>
|
||||
<table>
|
||||
<tr>
|
||||
<td style="border:1px red solid; line-height: 1px">
|
||||
<img src="https://js.cx/clipart/square_50.png" width="10" height="10" style="vertical-align:top">
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
20
8-css-for-js/12-space-under-img/valign-small.view/index.html
Normal file
20
8-css-for-js/12-space-under-img/valign-small.view/index.html
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<style> * { margin: 0; padding: 0; } </style>
|
||||
<table>
|
||||
<tr>
|
||||
<td style="border:1px red solid">
|
||||
<img src="https://js.cx/clipart/square_50.png" width="10" height="10" style="vertical-align:top">
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
20
8-css-for-js/12-space-under-img/valign.view/index.html
Normal file
20
8-css-for-js/12-space-under-img/valign.view/index.html
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<style> * { margin: 0; padding: 0; } </style>
|
||||
<table>
|
||||
<tr>
|
||||
<td style="border:1px red solid">
|
||||
<img src="https://js.cx/clipart/square_50.png" width="50" height="50" style="vertical-align:top">
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue