Я пытаюсь создать карту только с помощью 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>
Спасибо за помощь.
Ваши варианты - сделать <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>
И спасибо за объяснение. Это проясняет, почему это произошло.
Спасибо вам за быстрый ответ. Это сделало работу. Принять это как ответ.