Div和Anchor标记之间的随机间距
Div和Anchor标记之间的随机间距
提问于 2017-05-19 15:49:48
我正在尝试制作一个按钮，具有绿色的背景，图像和文本，所有这些都应该是可点击的，以带您到相同的目的地。
我不确定如何做到这一点，但就目前而言，它是有效的。它看起来有点混乱，而且我使用了两次相同的类，我知道你不应该这样做，但我一直无法找到解决方案。
我正在寻找的答案是最小化图像和文本之间的空间，同时仍然让所有东西都像上面描述的那样工作。它可能与div标签有关，但当我更改任何内容时，它们都不起作用。
.takecoverbutton {
width: 759px;
height: auto;
background-color: green;
border-radius: 6px;
text-align: center;
margin: 0 auto;
}
.takecoverimage {
padding-top: 6px;
}
.buttonpara {
font-size: 30px;
font-family: "Comic Sans MS", cursive;
color: white;
text-decoration: none;
}<div class="takecoverbutton" align="center">
<a href="takecover.html">
<div class="takecoverbutton" align="center">
<div class="takecoverimage">
<img src="images/takeCoveriCon.jpg">
</div>
<p class="buttonpara">1. Take Cover</p>
</div>
</div>
</a>
</div>
提前感谢！
回答 3
Stack Overflow用户
发布于 2017-05-19 15:57:09
默认情况下，浏览器会在段落中添加一些页边距。你需要去掉页边距。
您的.buttonpara正在删除页边距添加此css margin-top:0px;
.buttonpara {
font-size: 30px;
font-family: "Comic Sans MS", cursive;
color: white;
text-decoration: none;
margin-top:0px;
}代码片段
.takecoverbutton {
width: 759px;
height: auto;
background-color: green;
border-radius: 6px;
text-align: center;
margin: 0 auto;
}
.takecoverimage {
padding-top: 6px;
}
.buttonpara {
font-size: 30px;
font-family: "Comic Sans MS", cursive;
color: white;
text-decoration: none;
margin-top:0px;
}<div class="takecoverbutton" align="center">
<a href="takecover.html">
<div class="takecoverbutton" align="center">
<div class="takecoverimage">
<img src="images/takeCoveriCon.jpg">
</div>
<p class="buttonpara">1. Take Cover</p>
</div>
</a>
</div>
Stack Overflow用户
发布于 2017-05-19 15:57:17
使用<div></div>而不是<p></p>
.takecoverbutton {
width: 759px;
height: auto;
background-color: green;
border-radius: 6px;
text-align: center;
margin: 0 auto;
}
.takecoverimage {
padding-top: 6px;
}
.buttonpara {
font-size: 30px;
font-family: "Comic Sans MS", cursive;
color: white;
text-decoration: none;
}<div class="takecoverbutton" align="center">
<a href="takecover.html">
<div class="takecoverbutton" align="center">
<div class="takecoverimage">
<img src="images/takeCoveriCon.jpg">
</div>
<div class="buttonpara">1. Take Cover</div>
</div>
</a>
</div>
Stack Overflow用户
发布于 2017-05-19 16:07:37
这是因为您的p标记上有一个边距
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44064412
复制相关文章
相似问题
腾讯云开发者
