Jump to content

Mark Laurence
 Share

Recommended Posts

The page in question is Here

For the life of me, I cannot get rid of the bottom overhang.

Any suggestions? I is it possible at all?

<!-- THUMBNAIL -->

<style>

div.gallery {
    margin: 4px;
    float: left;
    width: 180px;
}
div.gallery:hover {
    	box-shadow: 2px 0px 2px 0px rgba(0, 0, 0, .2), 0 0px 0px 0 rgba(0, 0, 0, 0.2);
}

div.gallery img {
    width: 100%;
    height: auto;
}

</style>

 

Edited by Mark Laurence
Link to comment
Share on other sites

The img element is a inline element, so if you stack your code like

<div class="gallery">
	<a href="#">
      <img class="image" src="image.jpg">
  	</a>
</div>

each html line break, causes a space the size of current font size after the image.

To fix, define the image as a block element using display: block.

Edited by dsonesuk
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...