Огромное белое пространство внизу страницы

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

body {
color: #555;
}

img {
width: 100%;
height: 100%;
/*z-index:					0;*/
display: inline-block;
}

.tint {
position: relative;
box-shadow: rgba(0, 0, 0, .2) 3px 5px 5px;
}

.wrap {
overflow: hidden;
margin: 0 auto;
}

.tint:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 255, 0.5);
transition: all .3s linear;
}

.tint:hover:before {
background: none;
}


.enter {
font-size: 24px;
/*z-index:					1;*/
color: white;
position: relative;
left: 58em;
top: -6em;
}

.week {
font-size: 20px;
font-family: Arial;
/*z-index:					2;*/
color: white;
top: -28.7em;
left: 7.4em;
position: relative;
}

#line {
position: relative;
/*z-index:					1;*/
color: white;
width: 10%;
left: -33em;
top: -37em;
}

.team {
position: relative;
font-size: 38px;
color: white;
top: -18em;
left: 4em;
font-family: Adobe Fan Heiti Std;
}

.percent {
position: relative;
font-size: 92px;
font-family: Arial;
top: -8.5em;
left: 2em;
color: white;
}

   <!DOCTYPE html>
        <html>
          <head>
            <title>Second Page</title>
            <meta charset = "utf-8">
        	<link rel = "stylesheet" type = "text/css" media = "screen" href = "pageTwo.css">
          </head>
          <body>
            <div class = "wrap">
              <img src = "think-og-image.jpg" alt = "think" class = "tint">
        	</div>
        	  <p class = "week">This Week</p>
        	  <hr id = "line">
        	  <p class = "enter">Enter</p>
        	  <p class = "team">Team Engagement</p>
        	  <p class = "percent">67%</p>
          </body>
        </html>

Что именно вы подразумеваете под пустым пространством? не могли бы вы опубликовать скриншот того, что вы имеете в виду ??

— 28.02.2019 05:46

css whitespace

28.02.2019 05:39

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Ответы 1

position:relative была причиной проблемы. и вместо того, чтобы давать position всем p элементам, я поместил их внутрь div с banner-content css и передал position:absolutebanner-content. и выровняйте его соответствующим образом. надеюсь это поможет. Благодарность

body {
    color: #555;
}

img {
    width: 100%;
    height: 100%;
    display: inline-block;
}

.tint {
    position: relative;
    box-shadow: rgba(0, 0, 0, .2) 3px 5px 5px;
}

.wrap {
    overflow: hidden;
    margin: 0 auto;
    position: relative;
}

.tint:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 255, 0.5);
    transition: all .3s linear;
}

.tint:hover:before {
    background: none;
}


.enter {
    font-size: 24px;
    color: white;
}

.week {
    font-size: 20px;
    font-family: Arial;
    color: white;
}

#line {
    color: white;
    width: 10%;
}

.team {
    font-size: 38px;
    color: white;
    font-family: Adobe Fan Heiti Std;
}

.percent {
    font-size: 92px;
    font-family: Arial;
    color: white;
}

.banner-content{
    position:absolute;
    top:0;
    width: 100%;
    text-align: center;
}
}

<!DOCTYPE html>
    <html>
      <head>
        <title>Second Page</title>
        <meta charset = "utf-8">
        <link rel = "stylesheet" type = "text/css" media = "screen" href = "pageTwo.css">
      </head>
      <body>
        <div class = "wrap">
          <img src = "https://images.unsplash.com/photo-1549985908-597a09ef0a7c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" alt = "think" class = "tint">
          
          <div class = "banner-content">
          <p class = "week">This Week</p>
          <hr id = "line">
          <p class = "enter">Enter</p>
          <p class = "team">Team Engagement</p>
          <p class = "percent">67%</p>
          </div>
        </div>
          
      </body>
    </html>

28.02.2019 05:59

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

Как избавиться от лишнего пространства как по горизонтали, так и по вертикали на моей html-странице

Добавить пробел между div

Есть ли в командной строке escape-последовательность, как в языке c?

Инвертирует массив в PYTHON и печатает сумму элементов массива A с соответствующими элементами реверса массива A

Отображение данных, передаваемых из InputStream/InputReader, с сохранением пробелов

Выполнение файла python в оболочке, имя которого содержит пробелы

Неожиданное поведение с string.split()

Сохранить полученное сообщение в переменную с помощью lua-скрипта telegram-cli

Как удалить пробел перед именами файлов, оставив другие пробелы нетронутыми в 3000 файлов в Windows 10

ElasticSearch ищет дефисный текст с пробелом вместо тире в запросе

Огромное белое пространство внизу страницы

Ответы 1

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

Похожие вопросы