html - 如何对齐 bootstrap div 中的内容，使其触及父 div 的边距

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 中使它写入子对象内容的属性是称为“填充”的属性。有 5 种不同的填充:

• 填充=*X*;使要写的内容在每一边都有边距
• 填充顶部:*X*；使要写的内容与顶部有边距
• 左填充:*X*；使要写的内容从左侧留出空白
• 右填充:*X*；使要写的内容从右侧留出空白
• 底部填充:*X*；使内容从底部留出空白

然后，您可以通过仅指定您想要的那些来在 CSS 中使用它们(数字 X 以 px 或 % 为单位。例如:padding-top:10px;)< br/>
因此，对于您来说，您必须搜索包含要与 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>

希望对您有所帮助! (如果答案正确，请不要忘记检查答案，以帮助其他人了解有效方法)