我无法在 Dreamweaver CC 2015 中为我的社交媒体图标添加填充。我的代码经验很少,但需要在今晚之前完成学校的作业。基本上,我需要在我的图标之间留出空间以看起来更具视觉吸引力(20px 是理想的)。我遇到的问题是,当我更改 CSS 的填充或边距时,在 Split View中,它显示了空间是如何创建但当我切换到实时取景时,空间回到 0px 和预览时相同。
代码:
.social-icon {
margin-right: 100px;
margin-left: 100px;
margin-top: 0px;
padding-right: 100px;
}
<footer>
<center>
<h4 class="footer" style="background-color: grey; width: 100%; padding-top: 100px; padding-bottom: 150px; margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 0px;">
<a href="http://facebook.com"><img src="../Flikk/images/facebook.png" width="70px" height="70px" class="social-icon"></a>
<a href="http://pinterest.com"><img src="../Flikk/images/pinterest.png" width="70px" height="70px" class="social-icon"></a>
<a href="http://twitter.com"><img src="../Flikk/images/twitter.png" width="70px" height="70px" class="social-icon"></a>
<a href="http://googleplus.com"><img src="../Flikk/images/gplus.png" width= "70px" height= "70px" class="social-icon"></a>
<a href="http://youtube.com"><img src="../Flikk/images/youtube.png" width= "70px" height= "70px" class="social-icon"></a>
</h4>
</center>
</footer>
最佳答案
.social-icon {
margin-right: 10px;
margin-left: 10px;
}
<footer>
<center>
<h4 class="footer" style="background-color: grey; width: 100%; padding-top: 100px; padding-bottom: 150px; margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 0px;">
<a href="http://facebook.com"><img src="../Flikk/images/facebook.png" width="70px" height="70px" class="social-icon"></a>
<a href="http://pinterest.com"><img src="../Flikk/images/pinterest.png" width="70px" height="70px" class="social-icon"></a>
<a href="http://twitter.com"><img src="../Flikk/images/twitter.png" width="70px" height="70px" class="social-icon"></a>
<a href="http://googleplus.com"><img src="../Flikk/images/gplus.png" width= "70px" height= "70px" class="social-icon"></a>
<a href="http://youtube.com"><img src="../Flikk/images/youtube.png" width= "70px" height= "70px" class="social-icon"></a>
</h4>
</center>
</footer>
你想让它们对齐??
或者你可以用 flexbox 来做
.footer{
display: flex;
justify-content: center;
flex-wrap:wrap;
}
.social-icon {
margin: 10px;
}
<footer>
<center>
<h4 class="footer" style="background-color: grey; width: 100%; padding-top: 100px; padding-bottom: 150px; margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 0px;">
<a href="http://facebook.com"><img src="../Flikk/images/facebook.png" width="70px" height="70px" class="social-icon"></a>
<a href="http://pinterest.com"><img src="../Flikk/images/pinterest.png" width="70px" height="70px" class="social-icon"></a>
<a href="http://twitter.com"><img src="../Flikk/images/twitter.png" width="70px" height="70px" class="social-icon"></a>
<a href="http://googleplus.com"><img src="../Flikk/images/gplus.png" width= "70px" height= "70px" class="social-icon"></a>
<a href="http://youtube.com"><img src="../Flikk/images/youtube.png" width= "70px" height= "70px" class="social-icon"></a>
</h4>
</center>
</footer>
关于html - 无法向图像添加填充,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36309194/