如何减少我的框中

时间:2016-02-07 07:27:58

标签: html css

你好我的表中有两个内容,所以有两个包含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 %}

1 个答案:

答案 0 :(得分:1)

为了控制CSS中的“cellpadding”,您可以简单地在表格单元格上使用填充。例如。 10px的“cellpadding”:

td { 
    padding: 10px;
}

对于“cellspacing”,您可以将边框间距CSS属性应用于表格。例如。对于10px的“cellspacing”:

table { 
    border-spacing: 10px;
    border-collapse: separate;
}

这个属性甚至可以允许单独的水平和垂直间距,这是旧学校“cellspacing”无法做到的。

相关问题