<div>
Try this:<br />
<br />
.PreviewCell img {<br />
&nbsp; &nbsp; display: block;<br />
&nbsp; &nbsp; height: 100%;<br />
&nbsp; &nbsp; margin-top: 2%;<br />
&nbsp; &nbsp; position: relative;<br />
&nbsp; &nbsp; top: 2px;<br />
&nbsp; &nbsp; width: 100%;<br />
}
</div>


Try this:

.PreviewCell img {
    display: block;
    height: 100%;
    margin-top: 2%;
    position: relative;
    top: 2px;
    width: 100%;
}

<div>
That didn't work. I wound up using a negative bottom margin.<br />
<br />

<pre><code id="code-20-37857386-1">.PreviewCell img
{
	display:inline-block;
	width:100%;
	height:100%;
	margin-bottom:-4%;
}</code></pre>
<br />
And that worked where using a positive top margin didn't. I'm not sure why, in fact I find it rather confusing.
</div>


That didn't work. I wound up using a negative bottom margin.



.PreviewCell img
{
	display:inline-block;
	width:100%;
	height:100%;
	margin-bottom:-4%;
}


And that worked where using a positive top margin didn't. I'm not sure why, in fact I find it rather confusing.

<div>
<div class="content wysiwyg-content">
I have a html page that displays a list of images generated by a server, but I don't want to display the bottom 2% of the image. My solution was to use overflow:hidden on the containing div for the image and then to give the image a 2% margin-top after setting it to display:inline-block. This worked great for a simple proof of concept page I built, but not so much for the actual page.<br />
<br />
A link for the working page:<br />
<a href="http://jsbin.com/otaduk" rel="ugc">Working page</a><br />
<br />
A link for the non working page:<br />
<a href="http://jsbin.com/eqiwax" rel="ugc">non-working</a><br />
<br />
My end goal is to get rid of the white line on the bottom of each image on the non-working page.
</div>
</div>


I have a html page that displays a list of images generated by a server, but I don't want to display the bottom 2% of the image. My solution was to use overflow:hidden on the containing div for the image and then to give the image a 2% margin-top after setting it to display:inline-block. This worked great for a simple proof of concept page I built, but not so much for the actual page.

A link for the working page:
Working page (http://jsbin.com/otaduk)

A link for the non working page:
non-working (http://jsbin.com/eqiwax)

My end goal is to get rid of the white line on the bottom of each image on the non-working page.

overflow: hidden not working as I expect

Cascading Style Sheets (CSS) is a language used for describing the look and formatting of a document written in a markup language. Usually used to change web pages and user interfaces written in HTML, it can also be applied to any kind of XML document. CSS is designed primarily to distinguish the content of a document from its presentation.

Web development includes all aspects of presenting content on intranets and the Internet, including delivery development, protocols, languages and standards, server software, browser clients, databases and multimedia generation.

Web Development

HTML (HyperText Markup Language) is the main markup language for creating web pages and other information to be displayed in a web browser, providing both the structure and content for what is sent from a web server through the use of tags. The current implementation of the HTML specification is HTML5.