为什么在这个背景上似乎有填充？

Question

我有以下HTML代码：

<div class="row">
<div class="col">
 <a href="id">
  <img src="file">
   <p class="titulo-noticia">The title</p>
 </a>
</div>
<div class="col">
 <a href="id">
  <img src="file">
   <p class="titulo-noticia">Another title</p>
 </a>
</div>
</div>

这必须显示一行，其中两个图片的页脚是标题。

css如下：

.col{
    display: table-cell;
}

.row{
    display: row;
}


.titulo-noticia{
    display: block;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 15px;
    text-align: center;
    background: #000;
    background: rgba(0,0,0, .8);
    color: #fff;
    font-size: 18px;
}

我的问题是<p>的大小为1196 * 51，但背景颜色并未满足此尺寸。我附上一张图片：

黑色不是<p>标签的完整尺寸。

如何实现用颜色填充p？

Answer 1

我不确定我是否理解你的问题，因为你没有明确表达它，额外的宽度和高度可能是一个余地，尝试：

.titulo-noticia{
 margin: 0;
}

而不是屏幕截图尝试包含更多代码，以便我们可以看到自己的问题是什么：）

希望这会有所帮助。

Answer 2

此规则

.titulo-noticia{
    display: block;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 15px;
    text-align: center;
    background: #000;
    background: rgba(0,0,0, .8);
    color: #fff;
    font-size: 18px;
}

可以缩减为

.titulo-noticia{
    padding: 15px;
    text-align: center;
    background: #000;
    background: rgba(0,0,0, .8);
    color: #fff;
    font-size: 18px;
}

在这种情况下，其他一切都无关紧要。但如果您描述的存在差距，则应将margin: 0添加到该规则中 - 这将重置从其他规则继承的任何边距。

BTW：没有display: row - DIV将只是一个块元素。 （但是 display: table-row - 也许你想要那个......）