Remove space around clickable image

Question

I'm trying to place a clickable image in the center using padding.

The problem is that there is a lot of unwanted clickable space around the image now. I can even click the image from the edges of my screen although the image is in the middle of the screen.

If I remove padding it works but then the image isn't were I want.

Is there a way to fix this?

My HTML:

<body>
    <div class="page">
      <div class="body">
        <div id="clicktoenter">
          <h1><a href="home.html" class="home" title="Home Link"></a></h1>
        </div>
      </div>
    </div>
</body>

My CSS:

.body{
    width:940px;
    margin:0 auto;
    padding:0 10px;
    overflow:hidden;
}

.home{
    margin-bottom: 10px;
    width: 460px;
    height:460px;
    display:block;
    background:url(../images/image.png) center center no-repeat;
    padding:200px 200px;
}

.home:hover{
    background:url(../images/imageclick.png) center center no-repeat;
    padding:200px 200px;
}

use margin instead of padding to put it where you want – btevfik Apr 05 '13 at 21:18 — btevfik, Apr 05 '13 at 21:18

score 1 · Accepted Answer · answered Apr 05 '13 at 21:20

1

Change your margin to this and it will center, not using padding.

.home{
margin:200px auto 200px auto;
width: 460px;
height:460px;
display:block;
background:url(../images/image.png) center center no-repeat;
}

answered Apr 05 '13 at 21:20

Kevin Lynch

24,427
3
36
37

What's the difference between `margin:200px auto;` and `margin:200px 200px;` – kalpetros Apr 05 '13 at 21:38
Margin is applied outside of the container and padding is within inside. – Kevin Lynch Apr 05 '13 at 21:43

score 1 · Answer 2 · answered Apr 05 '13 at 21:24

You have fixed width of block element, so you can to use auto left/right margins to center this block:

.home{
    margin:200px auto;
    width: 460px;
    height:460px;
    display:block;
    background:url(../images/image.png) center center no-repeat;
}

score -1 · Answer 3 · answered Apr 05 '13 at 21:25

-1

If you really want the clickable image to be in the middle of your screen, then forget the padding and just center the h1 the image is in.

#clicktoenter h1 {text-align:center}

answered Apr 05 '13 at 21:25

Mr Lister

45,515
15
108
150

inside
is block element. .home{display:block;}
– Pavlo Shandro Apr 05 '13 at 21:27

Remove space around clickable image

3 Answers3

is block element. .home{display:block;}

Linked