html - 更改可见性时 div 定位关闭

Question

我正在尝试使用媒体查询隐藏指向 tel 的锚定链接。到目前为止它按预期工作，但是当我尝试用没有 anchor 的类似图标和文本替换它时，它的位置重新定位有点不正常(我猜像顶部的 0.5em 边距)。无法弄清楚这里发生了什么。

这是我的代码片段。

我也在用 normalize.css .

/********************************************
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;
}

因此非链接段落占用的垂直空间比链接段落少，垂直对齐方式是自下而上，因此图标向下移动以进行补偿。

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

#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>