css -移除锚标签下的空白
css -移除锚标签下的空白
提问于 2018-04-18 22:03:01
看看能不能让它在这里工作：https://codepen.io/canovice/pen/pVoBXJ
我找了一下这个答案，但没办法解决这个问题。下面是我的一个react组件中锚标记的屏幕截图：
请注意3px边距(橙色)和3px填充(绿色)，还注意到文本下面有大量的空白，我想要去掉，但我很难做到这一点。任何帮助都是非常感谢的。
*注:我尝试了at this link here的建议，但没有运气.
*编辑:让我知道，如果有更多，我可以分享我的应用程序，即。目前的风格，这将有所帮助。
React组件的Javascript：
import React from 'react';
import FaTwitter from 'react-icons/lib/fa/twitter';
import './TopPageHeader.css'
const TopPageHeader = () =>
<div className="top-page-container">
<a href="/">Canova's Analytics Dashboards</a>
<div className="social-links">
<a href="https://twitter.com/SmokeyCanova">
<FaTwitter />
</a>
</div>
</div>
export default TopPageHeader;和CSS:
.top-page-container {
padding: 15px 20px;
margin: 0;
min-height: 30px;
height: auto;
width: 100%;
border-bottom: 1px solid #000;
display: flex;
justify-content: space-between;
}
.top-page-container a {
/*display: block;*/
/*height: auto;*/
vertical-align: bottom;
padding: 3px;
margin: 3px;
font-size: 1.75em;
/*padding: 15px 0px;*/
color: #000;
}
.top-page-container .social-links {
font-size: 1.75em;
/*padding: 15px 0px;*/
}最后，下面是组件在我的页面顶部的样子。Canova分析仪表板不是居中的，而是有点偏离中心位置(由于锚标签下面有额外的空白).理想情况下，文本的垂直中心和twitter徽标的垂直中心都将垂直地以包含在其中的div为中心。
这是组件包含在..。这是一个顶部页面标题组件，因此它之前没有任何内容。我不认为css在其他地方受到影响，但我可能错了。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-04-18 22:19:40
您在.top-page-container元素上使用.top-page-container，并带有一个min-height。这将正确地迫使子元素占用整个容器高度。
使用类似于align-items、center等的内容添加.top-page-content的flex-start属性。
.top-page-container {
padding: 15px 20px;
margin: 0;
min-height: 30px;
height: auto;
width: 100%;
border-bottom: 1px solid #000;
align-items: flex-start; // <-- add this
display: flex;
justify-content: space-between;
}
.top-page-container a {
/*display: block;*/
/*height: auto;*/
vertical-align: bottom;
padding: 3px;
margin: 3px;
font-size: 1.75em;
/*padding: 15px 0px;*/
color: #000;
}
.top-page-container .social-links {
font-size: 1.75em;
/*padding: 15px 0px;*/
}<div class="top-page-container">
<a href="/">Canova's Analytics Dashboards</a>
<div class="social-links">
<a href="https://twitter.com/SmokeyCanova">
<FaTwitter />
</a>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49909687
复制相关文章
相似问题
腾讯云开发者
