Issue
I'm working on creating background colors with content inside of them, this is what I've come up with so far with help from other people on this site but I ran into a conundrum. When I plug in this code it creates what I want but there is one problem, on the borders there is a white space that surrounds the colored boxes. On top of the blue box is the small white space between the blue box and the top of the page, along with the sides of the blue/red/green box there is a small white space between the end of the page and the box. how do I change this where the white spaces are filled in with their matching colored.
This is just a test and I'm just messing with it before I make actual changes on my homework assignment. My goal is to make 10% of the top of the page a certain color (like light blue) and 80% another color (In the middle like Ivory) and then at the bottom make it like like grey.
div {
height: 100px;
position: relative;
}
.a:after, .b:before, .c:after {
content: "";
width: 100%;
height: 100%;
top: 0;
right: 0;
display: block;
position: absolute;
}
.a {
background: blue;
}
.b {
background: red;
}
.c {
background: green;
}
<div class="a"> </div>
<div class="b"> </div>
<div class="c"> </div>
Solution
Insert this in your CSS code.
body {
margin:0;
}
Answered By - Gio Rodriguez
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.