Menu
I am building a website for a friend, and part of his specification is that images should include links to view the image in a higher resolution. I enclosed the home image in an anchortag within a div, but I can't figure out why my image's margin space is clickable.
I'm assuming that it has to do with the image being inside of a div?
Here is my jfiddle: http://jsfiddle.net/9kSL3/5/
Here are the areas of interest:
<div id="home"> <a href="./images/home3.jpg"><img src='http://s17.postimg.org/4glpnzdan/home3.jpg' border='0' alt="home3" /></a> </div> #home img{ width: 60%; display: block; margin-left: auto; margin-right: auto; /*border-radius: 15px; border: 1px;*/ } What's strange to me is that in this answer: Remove space around clickable image the answer is to use margin instead of padding
424
How To Create A Clickable Image In HTML? The <img> and the <a> tags together is the most common way of adding a clickable image link in HTML. In a webpage, after adding an image using the <img> tag, make it clickable by adding a <a> tag along with it.
Copy the URL you want to link to your image. Drag-and-drop the image that you want to turn into a link into your template. Click the image to open the toolbar, then click the link icon and select "Web Page" from the drop-down. Paste the copied URL into the Link URL Field.
Margin is the space between the border and the next element of your design. Think of the space outside the border and between it and the other elements. This is all the margin. Margin goes around all four sides of the content and you can target and change the margin for each side.
It's because you have an img using display: block inside an a tag, which is inline.
Move the width: 60% and margin: 0 auto; to the a tag with display: block and add width: 100% to img
Example: http://jsfiddle.net/9kSL3/6/
200
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
