Question

这是我的HTML代码：

<div class="container">
    <div class="row">
            <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="margin:0;">
                <article>
                      <img src="http://placehold.it/1000x500" class="img-responsive" alt="">
                      <div class="content">
                        <h3>Title</h3>
                        <p><i class="fa fa-calendar-o"><small> 1 June</small></i> &nbsp; <i class="fa fa-clock-o"><small> 11:45 PM</small></i></p>
                        <p>For many individuals and businesses developing a strong social media presence is a cornerstone of their digital strategy, so prioritising social media.... <a href=""><font color="#88c78a">Read More</font></a></p>
                        <div class="pull-right"><i class="fa fa-eye"></i> <small> 400 Views</small></div>
                        <div class="pull-left" ><i class="fa fa-thumbs-up"></i> <small> 400 Likes</small></div>
                      </div>
                </article>
            </div>


    <!-- End Row -->
    </div>

<!-- End Container -->
</div>

我的div目前看起来像这样：http://s13.postimg.org/fdis1mxyv/div.png

如果您浏览图像，则会看到左右绿色边缘有一些空间。我想要那个空间消失。

div的哪个属性有助于做到这一点？

Answer 1

css中的属性使得它写入子对象的内容是名为“padding”的属性。有5种类型的不同填充：

填充= * X *;使内容在每一方都有边距写入
填充顶：* X *;使用顶部的边距写入内容
填充左：* X *;使用左边的边距写入内容
填充右：* X *;使用右边的边距写入内容
填充底：* X *;从底部开始使用内容保证内容为内容

然后，你可以通过只指定你想要的那些来使用CSS中的这些（数字 X 是px或％。例如：padding-top：10px;）<登记/>
因此，对于您来说，您必须搜索包含要与div对齐的子项的子父类，并更改该值：

.parent
{
  padding:*X*px;
  //or padding-top, padding-left, padding-right, padding-bottom, in fonction of wich one you want
}

以下是一个向您展示示例的片段：

.parent_no_padding
{
  padding:0px;
}
.child_no_padding
{
  padding-top:0px;
  padding-left:0px;
  padding-right:0px;
  padding-bottom:0px;
}
.parent_with_padding
{
  padding:20px;
}
.child_with_padding
{
  padding:20px;
}

<table border="1"><tr><td>
<!-- Only for the look -->
  
<div class="parent_no_padding">
  <h3>Title here</h3>
    <div class="child_no_padding">
      <p>Content of the child</p>
      Write a little sentence here to make some content (without padding)
    </div>
</div>
  
<br/></td></tr><tr><td>
  
<div class="parent_with_padding">
  <h3>Title here agagin</h3>
    <div class="child_with_padding">
      <p>Content of the child</p>
      Write a second little sentence (with padding)
    </div>
</div>
  
<br/></td></tr><tr><td>
  
<div class="parent_with_padding">
  <h3>Title here over and over</h3>
    <div class="child_no_padding">
      <p>Content of the child</p>
      Write a last little sentence (parent with padding but child without padding)
    </div>
  
</div></td></tr></table>

希望这有帮助！（不要忘记检查答案是否正确，以帮助其他人看看哪些有效）

如何在bootstrap div中对齐内容，使其接触父div的边距

1 个答案: