{"id":971,"date":"2013-03-20T20:47:48","date_gmt":"2013-03-21T06:47:48","guid":{"rendered":"http:\/\/mymonkeydo.com\/?p=971"},"modified":"2013-03-20T20:47:48","modified_gmt":"2013-03-21T06:47:48","slug":"space-under-image-link","status":"publish","type":"post","link":"https:\/\/mymonkeydo.com\/space-under-image-link\/","title":{"rendered":"Space Under Image Link"},"content":{"rendered":"
I had the following code like so:<\/p>\n
<div class=”someborder”><a href=”#”><img src=”someimage.png”><\/a><\/div><div>some text<\/div><\/p>\n
The class “someborder” basically made a border around the image. \u00a0The problem was that there would be some space under the image and then the border would show. \u00a0I took off all padding and margins on the image and divs and the space still would not go away.<\/p>\n
Simple as vertical-align:text-bottom. \u00a0I’m guessing this works because I have some text in the next div. \u00a0Not sure why the text in another div would affect the image, but ok, it works.<\/p>\n
img {
\nvertical-align: text-bottom;
\n}<\/p>\n
<\/p>\n