This question already has answers here:
How wide is the default `<body>` margin?
(4 answers)
Div not 100% width of browser
(4 answers)
Closed 2 years ago.
I want a div, which acts as a separator. It should have a hundred percent width. However, it doesn't align with the border of the browser.
What is wrong? I tested it with the latest firefox and chrome:
<div style="background-color: black;height:4px;display:block;"></div>
<div><p>Content</p></div>
<div style="height:20px;"></div>
I also tested the CSS-style "border" instead of background-color, but it has the same result.
Just remove the margin from the body:
body {
margin: 0;
}
<div style="background-color: black; height: 4px; display: block;"></div>
<div><p>Content</p></div>
<div style="height: 20px;"></div>
Inline version:
<body style="margin: 0;">
give 100% width to body. it will fix the problem.
Related
This question already has answers here:
Why does this CSS margin-top style not work?
(14 answers)
What is the default padding and/or margin for a p element (reset css)?
(5 answers)
Closed 2 years ago.
If I have a <div> with a <p> tag in it and I apply a non-0 padding value to the <div>, the height of the <div> is increased by the font-size of the <p> tag (16px in this case), in addition to the padding. The same applies to the top of the div. What rule explains this behavior?
This came up when I needed to change the padding of an element with 1px bottom padding to 0 and was surprised when the padding was reduced by much more than 1px.
div.container {
background-color: peachpuff;
padding: 25px 12px 0 0;
}
div.container.padding-1{
padding-bottom:1px;
}
p.text{
text-align: center;
background-color: limegreen;
font-size:16px;
}
<div class="container">
<p class="text">
Padding bottom 0
</p>
</div>
<div class="container padding-1">
<p class="text">
Padding bottom 1
</p>
</div>
Box Model:
Sorry if its hard to read, the element content height changes from 50 to 34 when padding is reduced by 1.
This question already has answers here:
Why doesn't height: 100% work to expand divs to the screen height?
(12 answers)
Setting height: 100% on my label element doesn't work
(2 answers)
Closed 3 years ago.
The innermost child div has a height of 0 even though its parent does not have a height of 0.
However, if I change the css property min-height to simply height in the topmost div then the innermost div takes up the whole screen (as expected)
Why does height and min-height behave differently in the topmost div?
<body>
<div style="
display: flex;
flex-direction: column;
min-height: 100vh;">
<div style="flex: 1">
<div style="height: 100%;"></div>
</div>
</div>
</body>
This question already has answers here:
Maintain the aspect ratio of a div with CSS
(37 answers)
Height equal to dynamic width (CSS fluid layout) [duplicate]
(9 answers)
Responsively change div size keeping aspect ratio [duplicate]
(5 answers)
Closed 4 years ago.
I don't know how but I've been at this for hours and can't figure it out.
I'm trying to make a div have a fixed aspect ratio of 1:1, but the padding-top trick just isn't working.
Here is my code:
HTML:
<div class="test">
<div/><div/><div/><div/>
</div>
CSS:
.test {
width: 50px;
height: 0px;
padding-top: 100%;
background: blue;
}
Can anyone figure what I am doing wrong?
JSFiddle link: http://jsfiddle.net/ajpgbc0L/
Expected result: http://jsfiddle.net/ajpgbc0L/2/
EDIT: I should have made it clear that the width could be anything
Adding a wrapper element around it with a set width will allow you to achieve the desired result:
<div class="test__outer">
<div class="test">
<div/><div/><div/><div/>
</div>
</div>
css:
.test {
height: 0px;
padding-top: 100%;
background: blue;
}
.test__outer {
width: 50px;
}
This is because precent padding is calculated, based on the width of the containing block, not the block you are setting padding on:
https://developer.mozilla.org/en-US/docs/Web/CSS/padding#Values
This question already has answers here:
How do I uncollapse a margin? [duplicate]
(5 answers)
Closed 4 years ago.
How can I disable margin collapse and get 200px margin without changing the HTML?
code:
<style>
div{
font-size: 100px;
border: 10px solid black;
padding: 20px;
margin: 100px;
</style>
<body>
<div>AAAA</div>
<div>AAAA</div>
</body>
Thanks, :D.
Try adding a padding of 0.1px to the body tag, or any parent tag that will include these 2 divs.
This old trick used to disable collision for most cases.
You may want to see an explanation and other solutions here:
How to disable margin-collapsing?
This question already has answers here:
Can I stop 100% Width Text Boxes from extending beyond their containers?
(12 answers)
Closed 6 years ago.
I have a div with 1 em of padding.
Inside is a textbox, with the width set to 100%. This looks fine and as expected, with the width set 1 em inside the div.
However, when I add 1 em of padding-left to the textbox, the text box width is widened by 1 em, ignoring the padding on the right. So it now touches the edge of the div.
How do I resolve this?
<div style="padding:1em;background-color:pink">
<input style="width:100%;padding-left:1em" />
</div>
Because padding is added on top of the original width. Unless you set box-sizing: border-box which will allow the total width be calculated with padding and border included.
#outer {
background: red;
padding: 1em;
}
#text {
width: 100%;
padding: 1em;
box-sizing: border-box;
}
<div id="outer">
<input type="text" id="text">
</div>