Question

如何减少元素之间的空间。当屏幕尺寸减小时，它不应该破坏，即应该是响应。

以下是堆栈代码。

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<a class="vote-up"><i class="fa fa-sort-asc fa-3x"></i></a>
<h3 class="total_votes"> 1 </h3>
<a class="vote-down"><i class="fa fa-sort-desc fa-3x"></i></a>

但我尝试使用position, top, and bottom css属性，但无法获得所需的结果。此外，我尝试通过CSS删除h3元素上的默认边距和填充，但效果非常小。如何减少空间。另外，我不想删除fa-3x课程。我希望1和down-arrow向上移动。请帮助。

Answer 1

试试这个

＆＃13;

h3{
  margin-top:-3%;
  margin-bottom:-3%;
  padding-left: 2%;
  }

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<a class="vote-up"><i class="fa fa-sort-asc fa-3x"></i></a>
<h3 class="total_votes"> 1 </h3>
<a class="vote-down"><i class="fa fa-sort-desc fa-3x"></i></a>

＆＃13;

Answer 2

通过给出固定高度隐藏额外空间

.vote-up, .vote-down{
	display: inline-block;
	height: 20px;
	overflow: hidden;
}
.vote-down .fa-sort-desc{
	position: relative;
	top: -25px;
}
h3.total_votes{
	margin: 10px 0;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<a class="vote-up"><i class="fa fa-sort-asc fa-3x"></i></a>
<h3 class="total_votes"> 1 </h3>
<a class="vote-down"><i class="fa fa-sort-desc fa-3x"></i></a>

Answer 3

减少margin-top元素的margin-bottom和total_votes。

＆＃13;

.vote {
  width: 40px;
  text-align: center;
}

.total_votes {
  margin: -1em 0;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>

<div class="vote">
  <a class="vote-up"><i class="fa fa-sort-asc fa-3x"></i></a>
  <h3 class="total_votes">1</h3>
  <a class="vote-down"><i class="fa fa-sort-desc fa-3x"></i></a>
</div>

＆＃13;

CSS定位元素

3 个答案: