Не удается переопределить интервал между границами в таблице стилей агента пользователя
По какой-то причине я не могу переопределить интервал между границами в таблице стилей User Agent в Chrome. На данный момент он установлен на 2px, но я хочу, чтобы это было 0px. Коллапс границы переопределяется просто отлично, а интервал границы - нет.
Я также попытался добавить -webkit-border-horizontal-spacing и -webkit-border-vertical-spacing
Но эти переопределения не работают так же хорошо.
Мой HTML документ
<!DOCTYPE html>
<html>
<head><link href="inventorystyle.css" rel="stylesheet" type="text/css"></head>
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td><img src="iron-helmet.png"></td>
<td><img src="gold-helmet.png"></td>
<td><img src="diamond-helmet.png"></td>
</tr>
</tbody>
</table>
</html>
Мой инвентарь style.css
table {
border-collapse: collapse;
border-spacing: 0px;
-webkit-border-horizontal-spacing: 0px;
-webkit-border-vertical-spacing: 0px;
}
2 ответа
Это сводило меня с ума.
Попробуйте добавить CSS img {display:block;}
Это избавило меня от этого.
Это просто ошибка в том, как Chrome показывает правила CSS в Инструментах разработчика. border-spacing
свойство работает так, как определено в Chrome.
В этом случае, если вы проверяете table
элемент, border-spacing
информация отображается правильно. Это только для внутренних элементов, таких как td
где Инструменты разработчика показывают вводящую в заблуждение информацию. border-spacing
по определению собственность к ним не относится, поэтому ее ценность для них все равно не имеет значения. И если вы нажмете "Computed", вы увидите, что вычисленные стили не содержат border-spacing
вообще, даже в наследственных свойствах.
В примере значение border-spacing
для table
элемент также не оказывает никакого влияния, так как а) используется модель сжимающейся границы и б) разметка HTML содержит cellspacing="0"
атрибут, который устанавливает border-spacing
в 0
, если вы явно не переопределите это в CSS.