CSS Color beyond element size

Question

CSS Color beyond element size

Navigation

#1 by (2 votes)
#2 by (1 votes)
#3 by (1 votes)

2

I'm putting together a layout using the framework Bulma.io . So far it's as follows.

Myquestionis:

HowdoICSSallmydivsidebepainted?Asintheimageabove,Iwanttopaintthewhitespacethatisscratchedred.

Here'smyhtml.

<divclass="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

asked by anonymous 14.03.2018 / 17:27

3 answers

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 changes, you will have the space in it but it will be painted in the color of div .

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

14.03.2018 / 17:48

1

You can use the following command in your CSS tag:

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

14.03.2018 / 17:43

I would like to understand what OLTP is How to get the device serial number?

score 2 · Accepted Answer

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

The box-shadow property does not take up space so it does not interfere with the other elements.

I gave an example to demonstrate better. Notice that the dotted line is the limit of the <div> since the gray color is the box-shadow , Note that it 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>