CSS Color beyond element size

Asked

Viewed 198 times

2

I’m building a layout using the framework Bulma.. So far it’s as follows.

inserir a descrição da imagem aqui

My question is:

How to do with CSS all my div side get painted? As in the image above, I want to paint the white space that is scratched red.

Here’s my html.

<div class="container is-fluid">
    <div class="columns">
        <aside class="column is-narrow aside hero is-fullheight">
            <div style="width: 200px;">
                <p class="notification is-info"></p>
            </div>
        </aside>
        <div class="column">
            <p class="notification is-warning"></p>
        </div>
    </div>
</div>

And the css used to color the div lateral.

.aside {
    display: block;
    background-color: rgb(58, 73, 83);
}
css css3

  • Young without the code it is difficult to answer you. But surely it is margin setting! Put the code ai pq the way it is complicates...

  • @hugocsl posted the code, it has to do with the margins, but did not want to take the edge of the element, only make the color go beyond the margin.

3 answers

2


I think for this situation the best thing to do is to use the box-shadow.

The estate box-shadow does not occupy space so it does not interfere with the other elements.

I made an example to demonstrate better. Note that the dotted line is the limit of <div> the color gray is the box-shadow, Notice that he does not push the <div> lower down!

html, body {
    width: 100%;
    height: 100%;
    margin: 10px;
    padding: 0;
}
.box {
    box-sizing: border-box;
    padding: 5px;
    width: 200px;
    height: 100px;
    outline: 1.5px dashed red;
    box-shadow: 0 0 0 10px silver; /* controle aqui até onde vai a cor */
}
<div class="box">
    Meu conteúdo
</div>
<div class="box">
    Meu conteúdo
</div>

  • Excellent, it worked perfectly. Thank you!!

  • 1

    Golden Tip :) Good luck with the project!

1

You can use in your code CSS, the following command:

body {
    background: #163c7a; /* ou a cor que você deseja */
}

1

Since you mentioned that the problem is the margins do the following

.aside {
    margin-left: 0px;
    margin-top: 0px;
    padding-left:10px;
    padding-top:10px;
    display: block;
    background-color: rgb(58, 73, 83);
}

With the above mentioned changes, you will have the space in it but will be painted the color of the div.

Another way is to remove the margin as in the example above but adding a border-left with 10px width and with the color you want

Browser other questions tagged css css3

You are not signed in. Login or sign up in order to post.