I dont really understand why my example dont work, but something like that with bootstrap works perfectly.
<html style="height: 100%;">
<body style="height: 100%; padding-top: 70px;">
<div style="height: 100%; border: red solid;"></div>
</body>
</html>
http://fiddle.jshell.net/QVmjd/2/
Why my 100% height is more than 100%? Threrfore in http://getbootstrap.com/examples/navbar-fixed-top/, all is ok?
UPD:
more simple example with bootstrap http://fiddle.jshell.net/C3vrB/1/
UPD2: Examples became more clear to understand difference
the padding-top extends or adds 70px
<body style="height: 100%; padding-top: 70px;">
It's due to the way CSS handles the box model. Check out the W3C or the CSS Tricks rundown.
Essentially, your box's height is set by the height, and any additional styling such as padding, margin and border are applied to the outside of this size, so your element is being extended by the padding-top: 70px; to be 70 pixels higher than 100%;
If you need padding, you can either add padding by percentage:
height: 85%;
padding-top: 15%;
Bringing your box height to the total of 100%, or you could have the outer box a fixed height and add padding to the child elements, which does not effect the box size of the parent.
There is also the option of using the box-sizing property in CSS, which, when set to border-box, will render the padding, borders etc inside of the declared width and height of the box.
all you need to do this:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
and then your padding will be count as part of 100% height or width
Related
In snippet below padding-top overrides the height and max-height properties of container:
I want this <div> to be 10px high, but its 100px because of padding-top
as far as I understand this should be solved by box-sizing: border-box but this doesn't help
w3schools - border-box: the width and height properties (and min/max properties)
includes content, padding and border, but not the margin
.padding-test {
background: linear-gradient(109deg, #3adffd, #00abfb);
outline: 1px solid #3b3c6d;
width: 100%;
padding-top: 100px;
max-height: 10px;
height: 10px;
box-sizing: border-box;
}
<div class='padding-test'></div>
Can someone explain why is this happening and how to fix this?
Same happens for width and padding-left
UPD: I faced this issue when tried to change max height for box sized by aspect-ratio approach. I solved initial issue by setting parent size, but I still want to understand how border-box works with the padding - does it shrinks only content? is this correct behavior? is there any solution for this exact situation - can I override padding somehow?
I had run into the same doubt. According to MDN:
border-box
The width and height properties include the content, padding, and border, but do not include the margin. Note that padding and border will be inside of the box. For example, .box {width: 350px; border: 10px solid black;} renders a box that is 350px wide, with the area for content being 330px wide. The content box can't be negative and is floored to 0, making it impossible to use border-box to make the element disappear.
so box-sizing: border-box doesn't mean you can set the "border box" directly, but only affects how "content box" is calculated, which cannot be negative.
And my solution is: avoid the paddings, use a height-holding div or ::before pseudo element with designated height instead. (may also need overflow: hidden.) For example:
.padding-test {
height: 10px;
box-sizing: border-box;
overflow: hidden;
}
.padding-test::before {
height: 100px;
content: '';
display: block;
}
I have some screen area (a parent div) that I want my <div> to completely fill up, but I also want to have a 5% gap around the its content. How could this best be implemented?
If I apply the rules: width: 100%; height: 100%; padding: 5%; they produce the desired effect (at least for <div> itself) but its bounds now exceed its parent element's bounds by 2 * paddingpx.
How can I ensure this <div>'s bounds take up 100% of its parent's, and still retains a 5% padding, without overflowing?
Note: I'm sure that I could find some hack ("just set width and height to 90%, since padding is 5%..), what I'm interested in is the most elegant, future proof, and intelligent solution. It seems that certain problems around positioning and sizing of individual divs almost totally go away when you are able to use more modern CSS technologies like Grid and Flex-box, so I'm open to that as well.
if my thought is right you need to use box-sizing:border-box , Specify that elements should have padding and border included in the element's total width and height:
like
*{
box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
}
please check this snippet
body {
margin:0;
padding:0;
}
.demo {
width:100%;
height:100vh;
float:left;
background:#000;
padding:5%;
box-sizing:border-box;
}
<div class="demo"></div>
I’ve got a <div> with padding. I‘ve set it to height: 0, and given it overflow: hidden and box-sizing: border-box.
div {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height: 0;
overflow: hidden;
padding: 40px;
background: red;
color: white;
}
<div>Hello!</div>
As I understand, this should make the <div> disappear.
However, it’s still visible (in Chrome 31 and Firefox 25 on my Mac). The height declaration doesn’t appear to be applying to the padding, despite the box-sizing declaration.
Is this expected behaviour? If so, why? The MDN page on box-sizing doesn’t seem to mention this issue.
Nor, as far as I can tell, does the spec — it reads to me like both width and height should include padding when box-sizing: border-box (or indeed padding-box) are set.
The exact definition of border-box is:
That is, any padding or border specified on the element is laid out and drawn inside this specified width and height. The content width and height are calculated by subtracting the border and padding widths of the respective sides from the specified ‘width’ and ‘height’ properties.
So you can modify the height and width properties, but padding and border never change.
As the content width and height cannot be negative ([CSS21], section 10.2), this computation is floored at 0.
Then, if height is 0, you can't make the padding be inside, because that implies the height will be negative.
The declaration of height: 0; is applied. If you leave it at height: auto;, you would see a 20px difference (the height of the line with "Hello!"), making it a total 100px high. With height set to zero, it's only 80px high: padding-top + padding-bottom = 80px
So the answer is: Yes, it's expected behavior.
You could set width and height to any value between 0 and 80px (if you have 40px of padding) and still get the same dimensions.
Update: As Hardy mentioned, using an additional wrapper div gets around this issue.
Demo
HTML:
<div class="div-1">
<div class="div-2">
Hello!
</div>
</div>
CSS:
.div-1 {
padding: 40px;
/* This is not visible! */
border: 1px solid tomato;
}
.div-2 {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height: 0px;
width: 0px;
background: red;
color: white;
overflow: hidden;
}
This question already has answers here:
Why does CSS padding increase size of element?
(6 answers)
Closed 7 years ago.
I have a div that's 500px in width, and 500px in height. The max-width and max-height are also set to 500px. I'm trying to make the padding-left of the div to be 100px so I can move the word "Hello" 100px from the left without increasing the overall width of the div. When I set the padding-left to 100px, the overall width of my div increased to 600px, even though I set the max-width of the div to be only 500px. Is there a way for me to move the word "Hello" 100px from the left without having the width of the div being increased, or wrapping another element around the word "Hello"?
div {
border: 1px solid red;
width: 500px;
height: 500px;
max-width: 500px;
max-height: 500px;
padding-left: 100px;
}
<div>
Hello
</div>
You need to adjust your box model. Put this in your CSS:
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
Paul Irish explains how the box model works and why we have to define it this way.
Essentially, when we use padding it adds itself to the value of the inner width/height. By adjusting your box-sizing to border-box you're saying that if your box is 500px wide, and you apply padding-left: 100px, it will simulate the box being only 400px to compensate for the padding - to give a total of 500px.
Browser support is universal at this point, and it performs well (despite the use of the * selector, which has as much of an impact as use HTML tags like h1 and p in CSS).
UPDATE: Note that the CSS above affects all elements that use the box-model. Whenever I update one box-model on a stylesheet, I update them all to prevent overlooking this detail later in the game when I am attempting to maintain continuity.
You can try using box-sizing: border-box, so as to force the declared height to take into account your padding(s).
div {
border: 1px solid red;
width: 500px;
height: 500px;
max-width: 500px;
max-height: 500px;
padding-left: 100px;
box-sizing: border-box;
}
<div>
Hello
</div>
I am trying to understand how borders affect the size and visualisation of an inner div. I have this problem in my application, where a border is displayed around fields with errors, and I can't seem to get the CSS right. (BTW, it's obvious that I don't quite "get" CSS just yet. I am working on it).
Consider this page:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Booking Dojo Application</title>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
#appContainer {
height: 50px;
width: 500px;
background-color: red;
}
#innerContainer {
height: 50px;
border-width: 5px;
border-style: solid;
/*width: 100%;*/
}
#ruler {
width: 500px;
background-color: blue;
height: 20px;
}
</style>
</head>
<body>
<div id="ruler"></div>
<div id="appContainer">
<div id="innerContainer">
<span>AHAH</span>
</div>
</div>
</body>
</html>
If I don't specify the width of the inner div, then its width is the same as the parent including the border.
But then, if I DO specify the inner div's width, something weird happen: Chrome puts the border "out", but... only to the right?!?
I am obviously missing something. So:
Why am I seeing what I am seeing?
What I would love to do, is know what the inner div's width should be specified as in order to get the same result as "without width"? (Other than going "99%" which seems to "work" in my app, but.... meh )
http://jsfiddle.net/X3gw6/1/
You need:
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box;
More info:
http://css-tricks.com/box-sizing/
Basically, inner div height and width are bigger, because of borders... that caused problems...
By default border is added to the width. If you do not specify a width the default is to take all of the space it can and make it fit. So the inner width is 100%-borders.
When you specify a width you are by default specifying the inner width. 100% plus borders > 100%.
box-sizing:border-box; rule when added means you are specifying the width with borders. This is part of CSS3.
If widths are percentages but you need a fixed size border, box-sizing:border-box; rule makes it possible. http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
It's because borders add to the elements height and width. So a width of 100% is 500px plus 5px left and 5px right border = 510px. You can see that width: 490px; makes the inner container inline with the other elements: http://jsfiddle.net/2wLQR/
box-sizing: border-box; will stop it from going out of line: http://jsfiddle.net/2wLQR/1/