在Flex中丢失带有链接的图像的页边距

Question

我想在flexbox中添加带有链接的图片的边距，但以下代码不起作用。.icon img下的margin-top: 2.5%;未生效。有人能告诉我我哪里做错了吗？谢谢。

​

.name {
  margin-top: 6%;
  color:darkblue;
  margin-bottom: 0;
  margin-left: 47.3%;
  margin-right: 2%;
}

.nameAndContacts {
  display: flex;
  justify-content: space-between;
  margin-left:26.8%;
  margin-right: 30%;
}

.icons img {
  margin-top: 2.5%;
  max-height: 20px;
  max-width: auto;
}

<div class="nameAndContacts">
        <p class="name"><b>Tianyi Ma</b></p>
        <div class="icons">
          <a href="https://github.com/tianyi-m">
          <img src={githubIcon} alt="Github Icon"></img></a></div>
        <div class="seperator"></div>
        <div class="icons">
          <a href="https://medium.com/@tma8">
            <img src={mediumIcon} alt="Medium Icon"></img></a></div>
        <div class="icons">
          <a href="https://www.douban.com/people/243284156/">
            <img src={doubanIcon} alt="Douban Icon"></img></a></div>

​

Answer 1

下面的代码片段会对你有很大的帮助。您可以使用具有良好html结构的display:flex;属性。

​

*,*::before,*::after{
    box-sizing: border-box;
}
.nameAndContacts {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
  width: 100%;
  max-width: calc(100% - 20%);
  background-color: #f5f5f5;
  padding: 10px;
}
.name {
  color:darkblue;
  margin: 0;
}
.icons-box{
    display: flex;
    align-items: center;
}
.seperator{
    height: 20px;
    min-height: 20px;
    width: 1px;
    min-width: 1px;
    background: #ccc;
    margin: 0 15px;
}
.icons a{
    display: block;
}
.icons img {
    min-height: 20px;
    min-width: 20px;
    max-height: 20px;
    max-width: 20px;
    display: block;
    margin: 0;
}

<div class="nameAndContacts">
    <p class="name"><b>Tianyi Ma</b></p>
    <div class="icons-box">
        <div class="icons">
            <a href="https://github.com/tianyi-m">
                <img src="https://avatars.githubusercontent.com/apple?v=4" alt="Icon"/>
            </a>
        </div>
        <div class="seperator"></div>
        <div class="icons">
            <a href="https://medium.com/@tma8">
                <img src="https://avatars.githubusercontent.com/ansible?v=4" alt="Icon"/>
            </a>
        </div>
        <div class="seperator"></div>
        <div class="icons">
            <a href="https://www.douban.com/people/243284156/">
                <img src="https://avatars.githubusercontent.com/gatsbyjs?v=4" alt="Icon"/>
            </a>
        </div>
    </div>
</div>

​

Answer 2

这取决于其他样式以及在这些样式之前或之后添加的元素。您可以尝试将display: block;属性添加到<a></a>标记中，这可能会有所帮助。

<a href="https://github.com/tianyi-m" style="display: block;">
   <img src={githubIcon} alt="Github Icon"></img>
</a>