2017-09-28 6 views
0

Ich habe eine andere Frage an Sie. Ich habe beschlossen, etwas wie Web-Fanpage von Mr. Robot zu erstellen. Ich wollte HTML und CSS üben + JS lernen. Aber es gibt ein Problem, das ich nicht lösen kann. Es gibt Platz zwischen divs. Ich habe viele Tutorials versucht, um es zu entfernen, aber keiner von ihnen half. enter image description herewenig Platz zwischen divs

body { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin-left: 0px; 
 
    margin-top: 0px; 
 
} 
 

 
#main { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
header { 
 
    background: black; 
 
    padding: 1px; 
 
    max-width: 100%; 
 
} 
 

 
header p { 
 
    margin-left: 50px; 
 
    font-family: 'Inconsolata', monospace; 
 
    font-size: 50px; 
 
    text-align: center; 
 
} 
 

 
.barva { 
 
    color: #B20707; 
 
} 
 

 
.menu { 
 
    height: 100%; 
 
    width: 0; 
 
    position: fixed; 
 
    z-index: 1; 
 
    top: 0; 
 
    left: 0; 
 
    background: black; 
 
    overflow-x: hidden; 
 
    transition: 0.5s; 
 
    padding-top: 60px; 
 
} 
 

 
.menu a { 
 
    display: block; 
 
    text-decoration: none; 
 
    color: white; 
 
    font-size: 20px; 
 
    padding: 8px; 
 
    transition: 0.3s; 
 
    margin-left: 20px; 
 
    font-family: 'Poppins', sans-serif; 
 
} 
 

 
.menu a:hover { 
 
    color: #B20707; 
 
} 
 

 
.Openbt { 
 
cursor: pointer; 
 
position:absolute; 
 
top: 0; 
 
left: 0; 
 
margin-top: 20px; 
 
margin-left: 10px; 
 
float:left; 
 
color: #B20707; 
 
font-size: 50px; 
 
} 
 

 
.menu .closebt { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 25px; 
 
    font-size: 36px; 
 
    margin-left: 50px; 
 
    color: #B20707; 
 
} 
 

 

 
@media screen and (max-height: 450px) { 
 
    .sidenav {padding-top: 15px;} 
 
    .sidenav a {font-size: 18px;} 
 
} 
 

 
} 
 
.domu { 
 
    height: auto; 
 
} 
 

 
img 
 
{ 
 
    max-width: 100%; 
 
} 
 

 
.about { 
 
    height: auto; 
 
    max-width: 100%; 
 
    min-height: 250px; 
 
    background: black; 
 
}
<!doctype html> 
 
<html lang="cs-cz"> 
 
<head> 
 
    <link href="https://fonts.googleapis.com/css?family=Arimo" rel="stylesheet"> 
 
    <link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet"> 
 
    <link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet"> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
    <link rel="stylesheet" type="text/css" href="style.css"> 
 
    <meta charset="utf-8"> 
 
    <title>Yaaa boiii</title> 
 
</head> 
 
<body> 
 

 
    <header> 
 
     <p style="color:white "><span class="barva">ID:_ROOT:</span>Our<span class="barva">_democracy_</span>has<span class="barva">_</span><span class="barva">been</span>_hacked</p> 
 
     <div class=Openbt> 
 
    <span onclick="openNav()"><i class="fa fa-bars"></i></span> 
 
     </div> 
 
    </header> 
 

 
<div id="mySidemenu" class="menu"> 
 
    <a href="javascript:void(0)" class="closebt" onclick="closeNav()">&times;</a> 
 
    <a href="#">Home</a> 
 
    <a href="#">Home</a> 
 
    <a href="#">Home</a> 
 
    <a href="#">Home</a> 
 
    <a href="#">Home</a> 
 
</div> 
 

 
<div id="main"> <!-- Veškerý kontent --> 
 
    <div class="domu"> 
 
    <img src="obrazky/robot.jpg" width="1920" height="1000" /> 
 
    </div> 
 
    <div class="about"> 
 

 
    </div> 
 
</div> 
 

 
<script> 
 
    function openNav() { 
 
    document.getElementById('mySidemenu').style.width = "250px"; 
 
    document.getElementById('header').style.marginLeft = "250px"; 
 
    document.getElementById("main").style.marginLeft = "250px"; 
 
    } 
 
    function closeNav() { 
 
    document.getElementById('mySidemenu').style.width = "0px"; 
 
    document.getElementById("main").style.marginLeft = "0px"; 
 
    } 
 
</script> 
 

 
</body> 
 
</html>

Vielleicht bemerkt, dass ich auf dem Bild eine gewisse Breite und Höhe eingestellt hatte. Wie stelle ich Höhe 100% und Breite 100% ein? Ich habe versucht, es in .domu einzugeben, aber es hat nicht funktioniert.

+0

Mögliche Duplikat [HTML, CSS - seltsam unsichtbar Marge unterhalb der Abbildungen] (https://stackoverflow.com/questions/1383048/html-css-weird-invisible-margin-below -Bilder) – showdev

Antwort

3

Zwei Lösungen beinhalten beide die Änderung Ihrer CSS;

1) Sie können Ihre Körperhintergrundfarbe ändern, um der ungefähren Hintergrundfarbe zu entsprechen. Dies kann durch Hinzufügen der folgenden zu Ihrem CSS getan werden.

body 
{ 
    background: black; 
} 

2) Sie können den display: block; Stil auf Ihrem img-Tag.

<img src="obrazky/robot.jpg" width="1920" height="1000" style="display: block;"/> 

Viel Glück