This question already has answers here:
How wide is the default `<body>` margin?
(4 answers)
How do I remove the top margin in a web page?
(18 answers)
How do I remove the space between div and top of page?
(5 answers)
Closed 4 years ago.
My black box in this example should be all the way to the left and all the way up. I don't want to see any white space left or above of it.
#box {
width: 200px;
height: 200px;
margin-left: 0px;
background-color: black;
}
<div id="box"></div>
But that isnt the case! Can anyone tell me how I can achive this?
In most major browsers, the default margin is 8px on all sides. It is defined in pixels by the user-agent-stylesheet your browser provides.
You need to give margin:0 to body like this
body,html {
margin: 0;
padding:0;
}
<body>
<div id="box"></div>
</body>
<style>
#box {
width: 200px;
height: 200px;
margin-left: 0px;
background-color: black;
}
</style>
P.S Also set padding to 0 for both html and body
You need to add 0 margin to body and html as well
body, html{
margin:0;
}
#box{
width: 200px;
height: 200px;
margin-left: 0px;
background-color: black;
}
<body>
<div id="box"></div>
</body>
You also need to remove the default margin on the body element.
#box {
width: 200px;
height: 200px;
margin-left: 0px;
background-color: black;
}
body {
margin:0;
}
<div id="box"></div>
Related
This question already has answers here:
How to disable margin-collapsing?
(12 answers)
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Closed 2 years ago.
I have the following HTML/CSS code:
<style>
.container {
min-height: 100px;
width: 100%;
background: Green;
}
.timeline-container {
height: 100px;
width: 55%;
background: rgb(0 150 255);
}
</style>
<div class="container"></div>
<div class="timeline-container">
</div>
...which produces the following image:
Image of green box and blue box touching.
As you can see, the boxes are touching, with no vertical space between them.
I want to add some text to the second box, and I do so with an h4element. See code below:
<style>
.container {
min-height: 100px;
width: 100%;
background: Green;
}
.timeline-container {
height: 100px;
width: 55%;
background: rgb(0 150 255);
}
</style>
<div class="container"></div>
<div class="timeline-container">
<h4>Test words </h4>
</div>
Which produces this image: green and blue boxes are no longer touching
Vertical space has appeared between the two boxes, and it seems to occur when I add the h4 element. I do not want this vertical gap between the boxes.
I want to understand:
Why this vertical space suddenly appears (I assume I'm lacking a piece of fundamental knowledge).
How to create 2 such boxes, with an h4 element in the second, and have no such space.
Thanks in advance for any help folks can provide.
Remove margin for h4 like
.timeline-container h4{
margin:0;
}
.container {
min-height: 100px;
width: 100%;
background: Green;
}
.timeline-container {
height: 100px;
width: 55%;
background: rgb(0 150 255);
}
.timeline-container h4{
margin:0;
}
<div class="container"></div>
<div class="timeline-container">
<h4>Test words </h4>
</div>
This question already has answers here:
Forcing child to obey parent's curved borders in CSS
(5 answers)
Border-radius on two overlapping elements; background shines through
(5 answers)
Closed 4 years ago.
#outer {
width: 200px;
height: 200px;
background-color: white;
border-radius: 20px;
}
#inner {
width: 200px;
height: 50px;
background-color: steelblue;
border-radius: 20px 20px 0 0;
}
body {
background-color: steelblue;
}
<div id="outer">
<div id="inner"></div>
</div>
You can see that the white background of the parent is leaking behind the child, even though they have the same border-radius. How can I prevent this?
Edit: Neither of the duplicate questions appropriately answer my question. The leak still happens in the first question. The second question's marked answer uses an image and Javascript, which should not be necessary to fix this.
You can change the CSS to obtain a similar layout without this issue:
#outer {
width: 200px;
height: 200px;
background:
linear-gradient(to bottom,steelblue 50px,white 0);
border-radius: 20px;
}
body {
background-color: steelblue;
}
<div id="outer">
</div>
This question already has answers here:
Why doesn't height: 100% work to expand divs to the screen height?
(12 answers)
Closed 5 years ago.
I'm trying to create a div (Menu) with a width of 20% of my screen and a height of 100% but the div does not display on the screen. I do not know why. Here is my code:
#Menu {
display: inline-block;
background-color: black;
min-width: 20%;
min-height: 100%
}
#Bar {
float: right;
background-color: blue;
width: 80%;
height: 100%;
margin: 0;
float: left;
}
<div id="Menu">Menu</div>
<div id="Bar">Bar</div>
Since your div elements are empty, they will collapse to 0 height. A height of 100% does not help in this case.
You will find that you can display your elements if you include a min-height property.
I have made some modifications to get it to work, together with some fine-tuning. I always indent my real code, but I have left the modifications un-indented so that you can see them more easily.
#Menu {
display:inline-block;
background-color : black;
min-width:20%;
min-height:100%;
margin: 0;
min-height:10px;
float: right;
}
#Bar {
float:right;
background-color : blue;
width:80%;
height:100%;
margin:0;
float:left;
min-height: 10px;
}
<div id="Menu">
</div>
<div id="Bar">
</div>
This question already has answers here:
How to make a div 100% height of the browser window
(40 answers)
Closed 6 years ago.
I'm creating a div with 100% width of parent and now i want it to be 10% height of parent (no mater how long the content is).
I set height: 10% but it still didn't solve my problem.
Here is my css:
body {
margin: 0px;
padding: 0px;
height: 100%;
}
.header {
display: inline-block;
background-color: #008CDA;
width: 100%;
height: 10%;
margin: 0px auto;
padding: 0px;
}
All his parent must have height: 100%.
usually it looks like this:
html,
body {
height: 100%;
background-color:grey;
}
.wrap {
height: 100%;
background-color:yellow;
}
.your_div {
height: 10%;
background-color:red;
}
<div class="wrap">
<div class="your_div"></div>
</div>
Here's a quick JSfiddle showing a parent-child layed out as you describe:
https://jsfiddle.net/k0jur7yf/
{.child {
height:10%;
width:100%;
background-color: red;
}
Could you show us a snippet of your code if this doesn't solve your problem?
Check it, first make a div and its class parent.
enter image description here
Added the following class in your Css file or in head.
.parent {height:10%; width:100%;}
In div If you use width and height style in % then it will adjust according to content but when you use style in px then it will take according to size of the width and height.
example:
<div style="width:100%;height:10%;border: 3px solid red">FOr example</div>
<div style="width:100px;height:10px:border:3px solid red">
This question already has answers here:
Why does this CSS margin-top style not work?
(14 answers)
Closed 8 years ago.
When I use the margin-left it works. But the margin-top does not work. Anyone know why the on does work and the other doesn't?
Html code
<div id="footer"> <!-- BEGIN FOOTER -->
<p class="copyright"> Copyright © </p>
</div> <!-- END FOOTER -->
Css
#footer {
background-image: url(../website/images/footer.png);
width: 1200px;
height: 100px;
}
p.copyright {
margin-top: 10px;
margin-left: 120px;
}
It's called margin collapse. It happens when one block element is the child of another block element. here are a couple of methods to tackle the problem.
1- Add a border to the element
2- Add 1px of padding
3- change the position property. Margins of absolutely and relatively positioned boxes don’t collapse.
I've recently written a blog post about that to learn more refer here
try out this
#footer {
background-image: url(../website/images/footer.png);
width: 1200px;
height: 100px;
position:absolute;
}
p.copyright {
background-color:red;
margin-top: 10px;
margin-left: 120px;
}
Try this:-
#footer {
background-image: url(../website/images/footer.png);
width: 1200px;
height: 100px;
overflow:hidden; // add overflow
}
p.copyright {
margin-top: 10px;
margin-left: 120px;
}