How to take background-color from padding?

Question

I’m using Bootstrap 3 and I have a div like this:

<li class="col-md-3">
    <img src="image.jpg" alt="Example" />
    <div style="position: absolute; width: 100%; height: 100%; ">
        <span style="position: absolute; widht: 100%; height: 100%; padding-left: 15px; padding-right: 15px; background-color: #000">
            <p>Teste</p>
            <button type="button" class="btn btn-success">Clique Aqui</button>
        </span>
    </div>
</li>

I wish that span had the background only in the padding, as it has in the col-Md-3, so that the background was only in the image.

I tried some ways but I couldn’t, does anyone have any idea?

Answer 1

The padding is a space within the container, that is, if you have a background color it will be displayed. I believe it is not possible to remove the background color only from a part.

But as I said @xmdenis use edges or use margin.

     <span style="position: absolute; widht: 100%; height: 100%; border-left: 15px solid #000; border-right: 15px solid #000;">
        <p>Teste</p>
        <button type="button" class="btn btn-success">Clique Aqui</button>
    </span>

Answer 2

Try it this way, buddy:

CSS:

div {
    padding:50px;
    background-image:linear-gradient(to bottom, rgba(240, 255, 40, 1) 0%, rgba(240, 255, 40, 1) 100%), linear-gradient(to bottom, rgba(240, 40, 40, 1) 0%, rgba(240, 40, 40, 1) 100%);
    background-clip: content-box, padding-box;
}