Image link increases border

  • Hi
    I’m sure this is a simple thing, I just can’t get to the bottom of it. I have images with links attached, but it seems that the link itself is taking up space and increasing the border width at the bottom of the image by a pixel or two.

    This doesn’t help: 

    a img { border-bottom: none;
}

    It’s not life or death, but it is a bit annoying.
    Any suggestions would be good.
    Thanks

Viewing 3 replies - 1 through 3 (of 3 total)

  • Unless you provide a link to a page demonstrating the problem, no one will be able to offer much in the way of assistance.

    Thread Starter wambamboo

    (@agatha1)

    Ok, I thought it might have been some well-known CSS thing.
    Unfortunately the page is private for now but here are some code snippets.

    <div class="project-image"><a href="https://www.xxx.co.uk"><img src="https://www.xxx.co.uk/wp-content/uploads/2011/09/myimage.jpg" alt="xxx" title="xxx" class="alignnone size-full wp-image-290" /></a>
</div>
    .project-image {
	float: right;
	width: 58.94736842105263%;/*672px/1140px*/
	border: 0.5625em solid #fff;/*9px/16px*/
	margin: 4.25em 0 2.1875em 0;/*60px/16px*/
	-webkit-box-shadow: 2px 2px 4px 3px rgba(0, 0, 0, .2);
	-moz-box-shadow: 2px 2px 4px 3px rgba(0, 0, 0, .2);
	box-shadow: 2px 2px 4px 3px rgba(0, 0, 0, .2); 

}

img {
	max-width: 100%;
}

    I have not set any generic styles on ‘a’ tags yet.

    Code & CSS snippets are no good out of context. We need to see the page.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Image link increases border’ is closed to new replies.