Border-top not inline, border-bottom inline

Question

I have a simple image which I want to give a border-top and border bottom. This is my code:

<div class="details-big">
    <img src="../images/full/full21.jpg" alt="title" />
</div>

The CSS:

.details-big {
    border-top: 8px solid #f0f0f0;
    border-bottom: 8px solid #f0f0f0;
}

The problem is that the border-top cuts off a part of the image, while the border-bottom does the opposite, and adds white padding even before the border-bottom is displayed.

I would simply like the borders to be added neatly to the border without any spaces or parts of the image being cut off. Is this possible with CSS?

Answer 1

In fact it's not cut off at the top, it just has a space at the bottom, which is rendered by the inline img . If your div contains only the image, you can just set font-size:0 for your div. Also you can set the border for your img instead:

.details-big {
  border-top: 8px solid #f0f0f0;
  border-bottom: 8px solid #f0f0f0;    
  font-size:0;
}

You can also set display:block for your img :

.details-big > img {
  display:block;
}

Demo.