div 更改可见性时定位关闭

Question

我试图通过媒体查询隐藏锚定的 link 电话。到目前为止，它按预期工作，但是当我尝试用没有锚点的类似图标和文本替换它时，它的位置重新定位有点不合时宜（我猜想顶部有 0.5em 的边距）。无法弄清楚这里发生了什么。

这是我的代码片段。

/********************************************
CONTACT
********************************************/

#contact {
 border-top: solid 0.5em #0e2951;
 border-bottom: solid 0.5em #0e2951;
 background-color: #fff;
}

.contact-icon-box {
 width: 32%;
 display: inline-block;
 margin-top: 1.5em;
 text-align: center;
}
.contact-icon-link {
 width: 1em;
 margin: 0 auto;
 text-align: center;
 background-color: #3d7ddd;
 border-radius: 150px;
 font-size: 5em;
}

#contact p {
 padding: 1em 2em;
 margin-top: 1em;
}

#tablet-phone, #facebook-tablet, #email-tablet {
 display: none;
}

#tablet-phone p {
 margin: 0 auto;
}



/********************************************
TABLET ADJUSTMENTS
********************************************/

@media screen and (min-width: 768px) {
    body {
        background-color: lightblue;
    }

    #mobile-phone {
     display: none;
    }

    #tablet-phone, #facebook-tablet, #email-tablet {
  display: inline-block;
 }

}

<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>

<div id="contact">
 <div class="contact-icon-box">
  <a href="https://www.facebook.com/miha.sustersic.5"><div class="contact-icon-link ion-social-facebook">
  </div><p id="facebook-tablet">Miha Šušteršič</p></a>
 </div>

 <div class="contact-icon-box" id="mobile-phone">
  <a href="tel:+38631535919"><div class="contact-icon-link ion-ios-telephone">
  </div></a>
 </div>

 <div class="contact-icon-box" id="tablet-phone">
  <div class="contact-icon-link ion-ios-telephone">
  </div>
  <p>+386 31535919</p>
 </div>

 <div class="contact-icon-box">
  <a href="mailto:sustersic_miha@hotmail.com"><div class="contact-icon-link ion-email">
  </div><p id="email-tablet">sustersic_miha@hotmail.com</p></a>
 </div>
 <p>I am currently working for design and/or development work. If interested, contact me using facebook or email. Please only use phone contact when urgent.</p>
</div>

背景颜色调整只是为了检查媒体查询是否正常工作。

Answer 1

你的

#tablet-phone p {
    margin: 0 auto;
}

正在覆盖您

中的垂直边距

#contact p {
    padding: 1em 2em;
    margin-top: 1em;
}

所以非 link 段落比 link 段落占用的垂直 space 更少，垂直对齐方式是自下而上，所以图标向下移动补偿。

您可以通过添加更具体的选择器来防止这种情况发生，以确保不会覆盖特定的段落样式：

#contact p, #contact #tablet-phone p {
    padding: 1em 2em;
    margin-top: 1em;
}

更新了以下代码段：

/********************************************
CONTACT
********************************************/

#contact {
 border-top: solid 0.5em #0e2951;
 border-bottom: solid 0.5em #0e2951;
 background-color: #fff;
}

.contact-icon-box {
 width: 32%;
 display: inline-block;
 margin-top: 1.5em;
 text-align: center;
}
.contact-icon-link {
 width: 1em;
 margin: 0 auto;
 text-align: center;
 background-color: #3d7ddd;
 border-radius: 150px;
 font-size: 5em;
}

#contact p, #contact #tablet-phone p {
 padding: 1em 2em;
 margin-top: 1em;
}

#tablet-phone, #facebook-tablet, #email-tablet {
 display: none;
}

#tablet-phone p {
 margin: 0 auto;
}


/********************************************
TABLET ADJUSTMENTS
********************************************/

@media screen and (min-width: 768px) {
    body {
        background-color: lightblue;
    }

    #mobile-phone {
     display: none;
    }

    #tablet-phone, #facebook-tablet, #email-tablet {
  display: inline-block;
 }

}

<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>

<div id="contact">
 <div class="contact-icon-box">
  <a href="https://www.facebook.com/miha.sustersic.5"><div class="contact-icon-link ion-social-facebook">
  </div><p id="facebook-tablet">Miha Šušteršič</p></a>
 </div>

 <div class="contact-icon-box" id="mobile-phone">
  <a href="tel:+38631535919"><div class="contact-icon-link ion-ios-telephone">
  </div></a>
 </div>

 <div class="contact-icon-box" id="tablet-phone">
  <div class="contact-icon-link ion-ios-telephone">
  </div>
  <p>+386 31535919</p>
 </div>

 <div class="contact-icon-box">
  <a href="mailto:sustersic_miha@hotmail.com"><div class="contact-icon-link ion-email">
  </div><p id="email-tablet">sustersic_miha@hotmail.com</p></a>
 </div>
 <p>I am currently working for design and/or development work. If interested, contact me using facebook or email. Please only use phone contact when urgent.</p>
</div>

div 更改可见性时定位关闭

div positioning is off when changing visibility

html

css

media-queries