This question already has answers here:
margin from heading pushes div down
(2 answers)
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Closed 4 years ago.
The margin of an h2 element in my page is displacing the whole body down.
This doesn't seem normal as the h2 element is contained in a div container.
How can I fix this ?
Put this at the top of your css file:
body{
margin: 0;
padding: 0;
{
Related
This question already has answers here:
What is the default padding and/or margin for a p element (reset css)?
(5 answers)
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Closed 1 year ago.
I'm new to web dev, and I'm trying to understand more about the white space on the top of the page.
Here's my code snippet:
HTML:
<div>
<p>lorem ipsum</P>
</div>
CSS:
div {
background-color: black;
}
I tried to set 0 margin to the body element but the very top of the browser will still show white space.
body {
margin: 0;
}
Then I tried to add padding to the div, and the white space will no longer be there.
div {
padding-top: 100px;
}
But is there other ways to get rid of the white space?
Also, my understanding was that the browser has default setting to set margins, why did the white space remain after I set the body element's margin to 0?
You can specify both margin and padding to be 0 for the HTML element to remove all whitespace around the HTML element.
html {
margin: 0;
padding: 0;
}
This same technique can be used to remove all whitespace around any given element. By default, the p tag will include an added margin, causing more whitespace. To completely remove all whitespace for your given scenario, you can edit the above CSS block to the following:
html, body, p {
margin: 0;
padding: 0;
}
You can use this also:
*{
margin :0;
padding :0;
box-sizing :border-box;
}
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
CSS vertical alignment of inline/inline-block elements
(4 answers)
Closed 3 years ago.
I have 3 divs placed side by side. When I'm trying to put a header (or any element) inside of the middle div (or any div), that div floats way down. Why does it do that?
CSS I used for divs:
div {
display: inline-block;
background-color: lightgray;
height: 600px;
width: 300px;
}
Add *{box-sizing:border-box} to your CSS. It defines how the width and height of an element are calculated.
This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
How do nested vertical margin collapses work?
(3 answers)
How to disable margin-collapsing?
(12 answers)
Closed 3 years ago.
Consider the following HTML/CSS:
<div>
<p>Paragraph #1</p>
<p>Paragraph #2</p>
<p>Paragraph #3</p>
</div>
div {
background-color: gray;
padding: 0;
}
p {
margin-top: 1em;
margin-bottom: 1em;
}
The containing div has no padding, so the top margin of p #1 and the bottom of p #2 are not respected, effectively zero:
But now, if we introduce just a smidge of padding to the containing div, these margins are suddenly respected:
div {
padding-top: 1px;
padding-bottom: 1px;
}
Question:
Why does this behavior make sense? Why do the leading/trailing margins depend at all on the padding? Why don't they simply appear all the time, or not at all?
Is this behavior standard? It seems fairly consistent cross-browser (IE9, Firefox 69.0.3, Chrome 77.0.3865.120).
This question already has answers here:
Center image inside div horizontally
(4 answers)
How to center image horizontally within a div element?
(23 answers)
Closed 5 years ago.
I am new to css and want to understand some basics. What is the need to set image display property as block to center it inside div ?
#logo {
display: block;
margin-left: auto;
margin-right: auto;
}
How does changing the display to block change the behaviour of img element inside div (how does it help center image)?
img is an inline element so setting it display: block will completely change how it flows on the page
This question already has answers here:
CSS Margin Collapsing
(2 answers)
CSS Text Bottom Margin Ignored
(3 answers)
Closed 7 years ago.
I am using two divs, one on top with no content or height and the other below it with some content or just height. I wish to put some space between them and instead of using margin-bottom alone on the first div or margin-top alone on the second div I am evenly sharing the space between both, i.e. half the space on the first div's margin-bottom and half the sapce on the second div's margin-top. For some reason only one of the two seem to apply and the other is ignored.
Check out this example
http://jsfiddle.net/hkgq22x8/
body {
margin:0px;
}
.element1 {
margin-bottom:10px;
}
.element2 {
margin-top:10px;
border:1px solid #000;
height:30px;
}
<div class="parent">
<div class="element1"></div>
<div class="element2"></div>
</div>
try removing either margin-top on .element2 or margin-bottom on .element1, the space remains the same, but remove both and the space disappears.