Question

页面底部有大量空白。我不知道为什么。我已经尝试过调整图像的边距和内边距以及主体和空白区域的大小。我的代码非常幼稚。我看不到是什么导致了巨大的空白。我只有一个图像元素和四个段落元素。我猜想这与CSS中的position属性有关。我不知道。我已经为此工作了三天。请帮忙。

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>

Answer 1

position:relative引起了问题。而不是将position赋予所有p元素，而是使用div css将它们放入banner-content内，并将position:absolute赋予banner-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>

页面底部的巨大空白

1 个答案: