mohamed saed mohamed saed - 4 months ago 16
HTML Question

issue with section size

i have an issue with the section size its pretty small one
would like to know how to make it right
the section have one image on the left and text and info in the right
the image taken as 100% width but under it there are some space .



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

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

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

<div class="info">

<h1>about me </h1>

<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>

<div class="hobis">
<div>Web Design</div>
<div>Socer</div>
<div>Drawing</div>
<div>Watching Movies</div>
</div>
</div>

</div>
</div>
<!-- End About me section -->





enter image description here

Answer

Set your image to display: block;. The space you are seeing is due to the space left for descender height. Inline elements, as an <img> is by default, provide space for the descender of lower-case letters like y, j and g. Setting it to block removes the descender height.

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