你好我的表中有两个内容,所以有两个包含html内容的框。我想减少这两个盒子之间的距离,但我意识到一个盒子的尺寸太大,以至于它们只是白色空间。我在减小这个尺寸方面遇到了麻烦。有人可以帮我这个吗? 所以,同一行中的单元格x和单元格y更靠近。
<table class="table">
<tr id="cell">
---------------------------------------------------------------(one cell)
<td class="vert-align">
<div class="voting-space">
<a href="/post/{{ post.slug }}/vote?is_up=1" class="vote">
<span class="glyphicon glyphicon-triangle-top col-md-12" aria-hidden="true"></span></a>
<br />
<span class="col-md-12" style="height:1px; font-family: 'Passion One', cursive; bottom:10px; padding-left:0.01em;
"><h4 id="vote_count_{{ post.slug }}">{{ post.get_vote_count }}</h4></span> <br>
<a href="/post/{{ post.slug }}/vote?is_up=0" class="vote">
<span class="glyphicon glyphicon-triangle-bottom col-md-12" aria-hidden="true"></span></a>
</div>
</td>
--------------------------------------------------------------------(the other cell)
<td class="vert-align">
{% if post.url %}
<h4 id="line">
<a href="{{ post.url }}" target="_blank" style="margin-left: 15px; text-decoration:none;"> <img src="{{post.image}}" height="85" width="85"/><span id="title-font">{{ post.title }}</span></a>
<span style="margin-left: 15px;" class="domain">({{ post.domain }})</span>
<span class="discuss" style="color:red;"><a href="{% url 'post' post.slug %}" class="btn btn-warning btn-sm">토론장 입장</a></span>
<br />
<span class="post-info">{{ post.pub_date | timesince }}전/<a href="{% url 'userena_profile_detail' post.moderator.username %}">{{ post.moderator.username }}</a>작성/<i class="fa fa-eye"></i>{{post.views}}/<a href="/category/{{post.category}}">{{post.category}}</a></span>
</h4>
{% else %}
<h4><a href="{% url 'post' post.slug %}" style="margin-left: 15px;">{{ post.title }}</a><span style="margin-left: 15px; "class="domain">({{ post.domain }})</span></h4>
{% endif %}
答案 0 :(得分:1)
为了控制CSS中的“cellpadding”,您可以简单地在表格单元格上使用填充。例如。 10px的“cellpadding”:
td {
padding: 10px;
}
对于“cellspacing”,您可以将边框间距CSS属性应用于表格。例如。对于10px的“cellspacing”:
table {
border-spacing: 10px;
border-collapse: separate;
}
这个属性甚至可以允许单独的水平和垂直间距,这是旧学校“cellspacing”无法做到的。