Почему тег привязки не принимает высоту и ширину его содержащего элемента

Вот мой JsFiddle

Когда я проверяю размер якорных тегов с помощью инструментов разработчика Chrome, он показывает мне 144px*18px для 1-го элемента и 310px*18px для 2-го элемента.

Я хочу знать, почему он не принимает высоту и ширину содержащего элемента и как он рассчитывается.

.gallery {
    background-color: #abcdef;
}
.gallery img {
    display: inline-block;
    margin-left: 20px;
    margin-top: 20px;
}
.normal {
    height: 160px;
    width: 110px;
    border: 5px solid black;
}
.wide {
    height: 160px;
    width: 280px;
    border: 5px solid black;
}

<div class="gallery">
    <a href="#"> <img class="normal" src=""> </a>
    <a href="#"> <img class="wide" src=""> </a>
</div>

Ответ 1

CSS 2.1 spec говорит

Размеры области содержимого поля - ширина содержимого и высота содержимого - зависит от нескольких факторов: является ли элемент генерирование поля имеет свойство "ширина" или "высота", независимо от того, поле содержит текст или другие поля, независимо от того, является ли поле таблицей и т.д. Ширина и высота ящиков обсуждаются в главе о визуальных форматирование деталей модели.

Элемент <a> по умолчанию имеет значение отображения inline. Его содержимое участвует в макете, поэтому это элемент non-replaced.

Для высоты, спецификация говорит:

10.6.1 Встроенные, не замененные элементы

Свойство 'height' не применяется. Высота области содержимого должен основываться на шрифте, но в этой спецификации не указывается как.

Итак, 18px получается из одной строки текста, взятой из метрик шрифта. Ни большее значение не имеет ни размер изображения, ни размер блока.

Для ширины спецификация говорит

10.3.1 Встроенные, не замененные элементы

Свойство 'width' не применяется. Вычисленное значение "auto" для "margin-left" или "margin-right" становится используемым значением "0".

Другими словами, ширина определяется содержимым элементов <a>, paddings, границ и полей.

Для первого элемента <a>, что 114px (содержимое - изображение плюс одно пространство) + 20px (левое поле) + 2x5px (левая и правая граница) = 144px

Для второго элемента <a>, что 280px (содержимое - изображение) + 20px (левое поле) + 2x5px (левая и правая граница) = 310px

Просто нужно учитывать пробелы. Элементы выкладываются в строке строки в встроенном контексте, поэтому отбрасываются пробелы в начале первого элемента <a> и в конце второго элемента <a>. Пространства в конце первого элемента <a> и начало второго элемента <a> сбрасываются в одно пространство. Когда пробелы сбрасываются, всегда остается первое пространство, которое в этом случае является единицей в конце первого элемента <a>, поэтому почему пространство участвует в ширине первого элемента <a>, но не в ширина второго.

Ответ 2

использовать display:inline-block в привязке

.gallery a{
    display:inline-block;
}

здесь обновляется jsFiddle File

также удалите поле с изображения и добавьте его в anchor

.gallery a{
    display: inline-block;
    margin-left: 20px;
    margin-top: 20px;
}

Ответ 3

anchor всегда display: inline по умолчанию. Чтобы сделать anchor занял его детское пространство, вы должны дать ему display:block или в этом случае display:inline-block, чтобы они были inline и block.

a{
    display:inline-block;
}

JSFiddle

Прочтите этот вопрос для получения дополнительной информации.

Ответ 4

Тег должен быть также оформлен

Я добавил

.gallery a {
display: inline-block;
}

Ответ 5

Вместо применения {display: inline-block} в , попробуйте применить {float: left} к дочернему элементу . Высота теперь будет соответствовать высоте дочернего элемента.

Ответ 6

У меня была та же проблема, например, у меня есть HTML, сгенерированный с помощью GitHub приправленной уценки, так что могут быть параграфы, содержащие привязку с изображениями внутри.

Фактическая настройка display: inline-block у меня не работал display: inline-block в якорях. Я также установил display: block в изображениях. При использовании вложенных файлов Sass это выглядит так:

.gallery {
  a {
      display: inline-block;

      img {
        display: block;
      }
  }
}

Ответ 7

:focus {
  outline-style: auto;
}