Bild hat extra Platz an der Spitze

Ich habe ein Bild auf meiner Website und es gibt etwa 50px zusätzlichen Leerraum an der Spitze. Ich habe versucht, Padding keine und Marge keine, Display-Block, aber keiner von ihnen funktioniert. Here is a working jsfiddle of it. Hier ist mein HTMLBild hat extra Platz an der Spitze

 h1 { 
 
    font-size: 100px; 
 
    color: white; 
 
    text-align: center; 
 
    opacity: none; 
 
    font-family: 'Noto Sans', sans-serif; 
 
     } 
 

 
    p { 
 
    font-family: 'Roboto Condensed', sans-serif; 
 
    font-size: 70px; 
 
    color: black; 
 
    text-align: center; 
 
    } 
 

 
     .rotate { 
 
     float: left; 
 
     -webkit-transform: rotate(180deg) 2s; 
 
     transform: rotate(180deg) 2s; 
 
     transition: all 2s ease; 
 
     transition-delay: 0.4s; 
 
     } 
 

 
     .rotate:hover { 
 
      -webkit-transform: rotateZ(-360deg); 
 
      -ms-transform: rotateZ(-360deg); 
 
      transform: rotateZ(-360deg); 
 
     } 
 

 
    .container { 
 
    overflow: hidden; 
 
    font-family: 'Roboto Condensed', sans-serif; 
 
    position: static; 
 
    z-index: 150; 
 
    margin-bottom: -80px; 
 
     } 
 
    
 
    .container a { 
 
    float: right; 
 
    font-size: 20px; 
 
    color: black; 
 
    text-align: center; 
 
    padding: 40px 70px; 
 
    text-decoration: none; 
 
     transition: background 1s; 
 
     } 
 

 
    .dropdown { 
 
    float: right; 
 
    overflow: hidden; 
 
    } 
 

 
    .dropdown .dropbtn { 
 
    font-size: 20px; 
 
    border: none; 
 
    outline: white; 
 
    color: black; 
 
    padding: 40px 70px; 
 
    background-color: inherit; 
 
    font-family: 'Roboto Condensed', sans-serif; 
 
     transition: background 1s; 
 
     } 
 

 
     .container a:hover, .dropdown:hover .dropbtn { 
 
    background-color: lightgreen; 
 
     } 
 

 
    .dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    min-width: 160px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
    z-index: 1; 
 
    border-right: 1px solid #bbb; 
 
    } 
 

 
    .dropdown-content a { 
 
    float: none; 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
    text-align: left; 
 
    font-size: 18px; 
 
     } 
 

 
    .dropdown-content a:hover { 
 
    background-color: #ddd; 
 
    border-right: 1px solid #bbb; 
 
    } 
 

 
    .dropdown:hover .dropdown-content { 
 
    display: block; 
 
     }

 <body> 
 
     <div class="active"> 
 
     <div id="background"> 
 
    <div class="opacity"> 
 
    <div class="container"> 
 
    <div class="rotate"> 
 
    <img class="chiz" src="kkk.png" alt="Vortex Games"> 
 
    </div> 
 
     <a href="index.html">Home</a> 
 
     <a href="about.html">About</a> 
 
     <a href="FAQ.html">FAQ</a> 
 
     <a href="games.html">Games</a> 
 
     <div class="dropdown"> 
 
     <button class="dropbtn" 
 
     onclick="window.location.href='store.html'">Store</button> 
 
     <div class="dropdown-content"> 
 
     <a href="wall.html">Powerups</a> 
 
     <a href="store.html">Coins</a> 
 
     </div> 
 
     </div> 
 
     </div> 
 
     </div> 
 
     <p class="title"> 
 
     We're a top-of-the-line high tech <br>game company 
 
     <br> 
 
     <span style="color:white;font-size:20px;padding:none;display:inline- 
 
     block;"> 
 
     <span style="color:red;font-size:100px;padding-top:none;"> 
 
     &ndash;<br></span>Driven by passion. Always at our best.</span> 
 
    </p> 
 
    <!--the background div--> 
 
     </div> 
 
    
 
     <div class="creative"> 
 
    <img src="cree.jpg" align="abstop"> 
 
     </div> 
 
CSS

Jede Hilfe würde geschätzt.

Dank

Quelle

2017-07-05 Jacecraft29

Eine ** minimale ** Demo ist genug ... nicht die ganze Seite. Versuchen Sie, Ihren Code auf ** gerade genug ** zu reduzieren, um das Problem zu veranschaulichen. –

danke tut mir leid, ich bin immer noch neu hier – Jacecraft29

Wie ich sehe, haben Sie eine Antwort auf Ihre Frage, stellen Sie bitte Ihre Frage als beantwortet. das wird mich und eine Menge Leute in der Zukunft retten ... – chrillelundmark

Sie benötigen *{margin:0;padding: 0;} diese in Ihrem CSS hinzuzufügen. Weil es nicht nur um Ihre Bildeigenschaften geht. Sie haben mehr Element, das eine Standard-CSS-Eigenschaft hat, was Ihren HTML-Code beeinflussen kann. * Einen universeller Tag

*{ 
 
    margin:0;padding: 0; 
 
} 
 
.creative { 
 
    padding-top: none; 
 
} 
 
img { 
 
    display: block; 
 
} 
 

 
body { 
 
    /*body:0;*/ 
 
} 
 

 
#background { 
 
    background: url('https://sellorelse.ogilvy.com/wp-content/uploads/2016/06/creativity_technology.png'); 
 
    background-position:center top; 
 
} 
 

 
h1 { 
 
    font-size: 100px; 
 
    color: white; 
 
    text-align: center; 
 
    opacity: none; 
 
    font-family: 'Noto Sans', sans-serif; 
 
} 
 
p { 
 
    font-family: 'Roboto Condensed', sans-serif; 
 
    font-size: 70px; 
 
    color: black; 
 
    text-align: center; 
 
} 
 

 
.rotate { 
 
    float: left; 
 
-webkit-transform: rotate(180deg) 2s; 
 
    transform: rotate(180deg) 2s; 
 
    transition: all 2s ease; 
 
    transition-delay: 0.4s; 
 
} 
 

 
.rotate:hover { 
 
      -webkit-transform: rotateZ(-360deg); 
 
      -ms-transform: rotateZ(-360deg); 
 
      transform: rotateZ(-360deg); 
 
} 
 

 
.container { 
 
    overflow: hidden; 
 
    font-family: 'Roboto Condensed', sans-serif; 
 
    position: static; 
 
    z-index: 150; 
 
    margin-bottom: -80px; 
 
} 
 

 
.container a { 
 
    float: right; 
 
    font-size: 20px; 
 
    color: black; 
 
    text-align: center; 
 
    padding: 40px 70px; 
 
    text-decoration: none; 
 
     transition: background 1s; 
 
} 
 

 
.dropdown { 
 
    float: right; 
 
    overflow: hidden; 
 
} 
 

 
.dropdown .dropbtn { 
 
    font-size: 20px; 
 
    border: none; 
 
    outline: white; 
 
    color: black; 
 
    padding: 40px 70px; 
 
    background-color: inherit; 
 
    font-family: 'Roboto Condensed', sans-serif; 
 
     transition: background 1s; 
 
} 
 

 
.container a:hover, .dropdown:hover .dropbtn { 
 
    background-color: lightgreen; 
 
} 
 

 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    min-width: 160px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
    z-index: 1; 
 
    border-right: 1px solid #bbb; 
 
} 
 

 
.dropdown-content a { 
 
    float: none; 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
    text-align: left; 
 
    font-size: 18px; 
 
} 
 

 
.dropdown-content a:hover { 
 
    background-color: #ddd; 
 
    border-right: 1px solid #bbb; 
 
} 
 

 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
}

<div class="active"> 
 
    <div id="background"> 
 
    <div class="opacity"> 
 
    <div class="container"> 
 
    <div class="rotate"> 
 
    <img class="chiz" src="kkk.png" alt="Vortex Games"> 
 
</div> 
 
    <a href="index.html">Home</a> 
 
    <a href="about.html">About</a> 
 
    <a href="FAQ.html">FAQ</a> 
 
    <a href="games.html">Games</a> 
 
    <div class="dropdown"> 
 
     <button class="dropbtn" onclick="window.location.href='store.html'">Store</button> 
 
     <div class="dropdown-content"> 
 
     <a href="wall.html">Powerups</a> 
 
     <a href="store.html">Coins</a> 
 
     </div> 
 
    </div> 
 
</div> 
 
</div> 
 
<p class="title"> 
 
    We're a top-of-the-line high tech <br>game company 
 
<br> 
 
    <span style="color:white;font-size:20px;padding:none;display:inline-block;"> 
 
     <span style="color:red;font-size:100px;padding-top:none;"> 
 
     &ndash;<br></span>Driven by passion. Always at our best.</span> 
 
    </p> 
 
<!--the background div--> 
 
</div> 
 

 
<div class="creative"> 
 
<img src="http://drwillsparks.com/wp-content/uploads/2017/02/creativity.jpg" align="abstop"> 
 
</div>

Quelle

2017-07-05 12:03:41

Danke. Das hat wunderbar @Maddy funktioniert – Jacecraft29

macht es, weil einiger Browser voreingestellt Marge auf dem p-Elemente auftritt. Sie können es damit entfernen:

p.title { 
    margin-bottom: 0px; 
}

Quelle

2017-07-05 12:06:22 Sveta

Standardmäßig hat HTML-Seite Randwerte. Fügen Sie das hinzu, um diese Räume zu vermeiden

* { 
margin: 0; 
padding: 0; 
}

Quelle

2017-07-05 13:24:33 Sharmila

Bild hat extra Platz an der Spitze

Antwort

Verwandte Themen