Problem mit Abschnitt Größe

Question

Ich habe ein Problem mit der Abschnitt Größe seine ziemlich kleine möchte wissen, wie man es richtig macht der Abschnitt haben ein Bild auf der linken Seite und Text und Info in der rechten das Bild als 100% Breite, aber darunter ist etwas Platz.

/*Start About me */ 
 
.about-me{ 
 
\t background-color: #555; 
 
\t overflow: hidden; 
 
} 
 
.about-me .image{ 
 
\t float: left; 
 
\t width: 40%; 
 
} 
 
.about-me .image img{ 
 
\t width: 100%; 
 
} 
 
.about-me .info{ 
 
\t float: left; 
 
\t width: 60%; 
 
} 
 
.about-me .info h1,p{ 
 
\t padding-left: 40px; 
 
} 
 
.about-me .hobis{ 
 
\t overflow: hidden; 
 
\t margin: 40px; 
 
} 
 
.about-me .hobis > div{ 
 
\t float: left; 
 
\t width: 50%; 
 
} 
 
/*End About me */

<!-- Start About me section --> 
 
\t <div class="about-me"> 
 
\t \t <div class="contaner"> 
 

 
\t \t \t <div class="image"> 
 
\t \t \t \t <img src="http://placehold.it/350x300" alt="test"> 
 
\t \t \t </div> 
 
\t \t \t 
 
\t \t \t <div class="info"> 
 

 
\t \t \t \t <h1>about me </h1> 
 

 
\t \t \t \t <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus quo aspernatur veniam obcaecati corporis earum iure error Libero <br>minima laboriosam asperiores ad obcaecati provident, exercitationem aperiam tempora ducimus excepturi!</p> 
 

 
\t \t \t \t <div class="hobis"> 
 
\t \t \t \t \t <div>Web Design</div> 
 
\t \t \t \t \t <div>Socer</div> 
 
\t \t \t \t \t <div>Drawing</div> 
 
\t \t \t \t \t <div>Watching Movies</div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t 
 
\t \t </div> 
 
\t </div> 
 
\t <!-- End About me section -->

Answer 1

zu display: block; Stellen Sie Ihr Bild. Der Platz, den Sie sehen, ist auf den verbleibenden Platz für Unterlänge Höhe zurückzuführen. Inline-Elemente, wie ein ist standardmäßig, bieten Platz für den Senker von Kleinbuchstaben wie y, j und g. Wenn Sie diese Einstellung auf Blockieren setzen, wird die Unterlängenhöhe entfernt.

.about-me .image img { 
    width: 100%; 
    display: block; 
}