Why seems to have padding on this p background? - html

Question

I have the follow html code:
<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>
This must show a row with two images with a footer that it is the title.
The css is the following:
.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;
}
My problem is that the <p> have a size of 1196*51, but the background color not fullfill this size. I attach an image:
The black color is not the full size of <p> tag.
How can achieve to fullfill the p with the color?

Answer 1

I'm not sure I understand ur question since you did not formulate it that clearm, the extra width and height might a margin, try:
.titulo-noticia{
margin: 0;
}
Instead of a screenshot try to include some more code so we can see for our selfs what the problem is:)
Hope this helped.

Answer 2

This rule
.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;
}
can be reduced to
.titulo-noticia{
padding: 15px;
text-align: center;
background: #000;
background: rgba(0,0,0, .8);
color: #fff;
font-size: 18px;
}
Everything else has no relevance in this situation. But if there is a gap as you describe, you should add margin: 0 to that rule - this will reset any margin which is inherited from another rule.
BTW: There is no display: row - that DIV will simply remain a block element. (there is display: table-row , though - maybe you want that...)