тег img, вложенный в тег: проблема размера для первого тега - PullRequest
Новая
       7

тег img, вложенный в тег: проблема размера для первого тега

0 голосов
/ 23 октября 2019

Я вложил один тег img в один тег. Вот HTML: 

img {
  margin-bottom: 40px;
}

section a:nth-of-type(1) {
  background: green;
  height: 100px;
  width: 200px;
}
<section>
  <a href="https://www.adelaide.edu.au/" target="_blank">
    <img src="../image/soccerAndWorldCup.jpeg" alt="uniAdelaideLogo">
  </a>
  <a href="https://www.w3schools.com/html/" target="_blank">
    		    w3school
    	    </a>
</section>

Кажется, что изображение не обернуто в 1-й тег. Вместо этого он находится под изображением , а 1-й тег находится под изображением . Тем не менее, его размер был правильно установлен, когда я попытался проверить его размер 1-го тега . Правильное поле изображения правильное поле изображения .

Может ли кто-нибудь помочь объяснить, почему? Большое спасибо. Быстрое дополнение: это потому, что тег привязки является встроенным элементом, а img ведет себя как элемент встроенного блока? Я попробовал display: inline-block для 1-го тега и изображение оборачивается. Правильно ли мое понимание?

Ответы [ 2 ]

0 голосов
/ 23 октября 2019

display: inline игнорирует свойства width и height;inline-block нет.

Так что если вы сохраните a по умолчанию inline, его ширина будет определяться исключительно его содержимым (img внутри), а его высота будет значением по умолчаниюза одну строчку. Так как вся коробка будет выше, тем не менее, a будет отображаться внизу img (внутри поля img). В действительности, img находится в a, но выходит за его пределы.

Это что-то объясняет?

0 голосов
/ 23 октября 2019

Полагаю, здесь проблема с пробелами. Браузер отображает один пробел для каждой строки пробелов / табуляций между тегами.

Попробуйте: 

<section><a href="https://www.adelaide.edu.au/" target="_blank"><img src="../image/soccerAndWorldCup.jpeg" alt="uniAdelaideLogo"></a><a href="https://www.w3schools.com/html/" target="_blank">w3school</a></section>
...