Нежелательное пустое пространство сверху и слева
Я пытаюсь сделать изображение под заголовком в левом верхнем углу, но изображение не хочет закрывать левую сторону.
Я изменил позицию на position: absolute, сделал поля и отступы равными 0, просмотрел HTML-страницу и не увидел ничего, что могло бы повлиять на это изображение.
HTML:
<div class = "header">
<div class = "container">
<div class = "row">
<div class = "col">
<h1>Dillan Robbertze<h1>
<img src = "mountain-og.jpeg">
</div>
</div>
</div>
</div>
CSS:
.header img{
height:Auto;
left:0;
margin:0;
padding:0;
position:absolute;
width:100vw;
z-index:1;
}
Ожидаемые результаты: Изображение находится под заголовком вверху слева. Фактические результаты: слева и сверху изображения есть пустое пространство.
Обновлено: я добавил top:0; благодаря @Somesh Mukherjee. Изображение сместилось вверх, но осталось свободное пространство, которого там быть не должно.
@ j08691 о, ничего себе, я этого не знал! Спасибо.
Ответы 3
Вы не указали верхний атрибут
.header img{
height:auto;
left:0;
top:0;
margin:0:
padding:0;
position:absolute;
width:100vw;
}
Не имея изображения и не видя страницы, трудно сказать. Изображение может иметь белое поле. Проблема в том, что между h1 и изображением больше места, чем вы хотите?
Нет, у изображения не должно быть белого поля. Проблема в том, что слева есть поле или отступ, которых там быть не должно. Я проверил его, и он ничего не выходит. @user8356
почему бы тебе не попробовать:
top: -28px; position:relative;
Помог мне один или два раза в подобных ситуациях.
добавить класс к родительскому элементу div. и добавить положение относительно него.
.myNewClass {
position: relative;
}
также убедитесь, что у ваших родительских элементов нет полей и отступов. для этого вы можете использовать сброс CSS следующим образом:
* {
margin: 0;
padding: 0;
}
хотя это гарантирует, что все ваши элементы не будут иметь полей или отступов, поэтому вам нужно будет указать все, что вам нужно, самостоятельно. вы должны поместить это в начало файла CSS, если хотите его использовать.
@ j08691 j08691 спасибо, что сообщили мне. Не могли бы вы помочь определить, какая опечатка там с высотой? Второй видел, спасибо.