删除可点击图像周围的空间 [英] Remove space around clickable image
本文介绍了删除可点击图像周围的空间的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使用 padding 在中心放置一个可点击的图像.
问题是现在图像周围有很多不需要的可点击空间.我什至可以从屏幕边缘点击图像，尽管图像位于屏幕中间.
如果我删除 padding 它可以工作，但图像不是我想要的.
有没有办法解决这个问题?
我的 HTML:
<div class="page"><div class="body"><div id="clicktoenter"><h1><a href="home.html" class="home" title="主页链接"></a></h1>我的 CSS:
.body{宽度:940px；保证金:0 自动；填充:0 10px;溢出:隐藏；}.家{底边距:10px；宽度:460px；高度:460px；显示:块；background:url(../images/image.png) center center 不重复；填充:200px 200px;}.home:悬停{background:url(../images/imageclick.png) center center 不重复；填充:200px 200px;} 解决方案
将边距更改为此，它将居中，不使用填充.
.home{边距:200px 自动 200px 自动；宽度:460px；高度:460px；显示:块；background:url(../images/image.png) center center 不重复；}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;
}
解决方案
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;
}
这篇关于删除可点击图像周围的空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
