Лишнее пустое пространство в CSS?

Я пытаюсь создать карту только с помощью html и CSS, и на данный момент карта выглядит нормально, но в текстовом разделе карты я вижу дополнительное пустое пространство прямо над текстом. Может кто-нибудь понять, почему я могу это получить?

Вот ссылка на рабочий codepen.

h1 {
  text-align: center;
}
.container {
  margin: auto;
  border: solid;
  width: 300px;
  text-align: center;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.card-text {
  background-color: lightgreen;
  padding: 0;
  margin: 0;
}
<!DOCTYPE html>
<html lang = "en">

<head>
  <meta charset = "UTF-8">
  <meta name = "viewport" content = "width=device-width, initial-scale=1">
  <title>Let's Create a Card</title>
</head>

<body>
  <h1>Card</h1>
  <div class = "container">
    <img src = "https://i.pinimg.com/originals/ca/76/0b/ca760b70976b52578da88e06973af542.jpg" alt = "My-image" height = "300px" width = "300px">
    <p class = "card-text">Some Text that goes for the card Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed ipsa cum illo accusamus aperiam nulla quam. quae?</p>
  </div>
</body>

</html>

Спасибо за помощь.

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
1
0
72
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Ваши варианты - сделать <img>:

  • display: block или
  • vertical-align: bottom

<img>: элемент встраивания изображения — стилизация с помощью CSS

<img> — замененный элемент; по умолчанию он имеет встроенное отображаемое значение ...
<img> не имеет базовой линии, поэтому, когда изображения используются во встроенном контексте форматирования с вертикальным выравниванием: базовая линия, нижняя часть изображения будет размещена на базовой линии текста.

Таким образом, в зависимости от стилей font, font-size и line-height, унаследованных от родительского элемента, некоторое пространство будет зарезервировано для верхних и нижних элементов возможно соседнего текста.

Подробнее об этом можно прочитать здесь.

display: block;

.container {
  border: solid;
  width: 300px;
}

.card-text {
  background-color: lightgreen;
  margin: 0;
}

img {
  display: block;
}
<div class = "container">
  <img src = "https://i.pinimg.com/originals/ca/76/0b/ca760b70976b52578da88e06973af542.jpg" alt = "My-image" height = "300px" width = "300px">
  <p class = "card-text">Some Text that goes for the card Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed ipsa cum illo accusamus aperiam nulla quam. quae?</p>
</div>

vertical-align: bottom;

.container {
  border: solid;
  width: 300px;
}

.card-text {
  background-color: lightgreen;
  margin: 0;
}

img {
  vertical-align: bottom;
}
<div class = "container">
  <img src = "https://i.pinimg.com/originals/ca/76/0b/ca760b70976b52578da88e06973af542.jpg" alt = "My-image" height = "300px" width = "300px">
  <p class = "card-text">Some Text that goes for the card Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed ipsa cum illo accusamus aperiam nulla quam. quae?</p>
</div>

Спасибо вам за быстрый ответ. Это сделало работу. Принять это как ответ.

TreeHuggerRick 26.12.2020 02:16

И спасибо за объяснение. Это проясняет, почему это произошло.

TreeHuggerRick 26.12.2020 02:17

Другие вопросы по теме