This question already has answers here:
How to make an element width: 100% minus padding?
(15 answers)
Closed 1 year ago.
Using padding causes columns to not display properly.
/*Column code*/
.column {
float: left;
width: 50%;
font-family: 'Trebuchet MS', sans-serif;
padding: 1cm;
}
.row:after {
content: "";
display: table;
clear: both;
}
#media screen and (max-width:600px) {
.column {
width: 100%;
}
}
Columns with padding.
Columns without padding.
cm is not recommended for screens try changing padding to percentage or px.
have a look at this blog for details
You have set the width of each column to 50%. If there is no padding (or margin or border) on each of those elements then two will fit in the width of the viewport (when that is above your media query).
However, when you add padding the overall width of each column goes up to 50% + 2xpadding.
This happens if the box-sizing is set at the default.
You can override this by setting box-sizing: border-box this will include padding etc in the set width.
Further info at MDN:
content-box gives you the default CSS box-sizing behavior. If you set an element's width to 100 pixels, then the element's content box will be 100 pixels wide, and the width of any border or padding will be added to the final rendered width, making the element wider than 100px.
border-box tells the browser to account for any border and padding in
the values you specify for an element's width and height. If you set
an element's width to 100 pixels, that 100 pixels will include any
border or padding you added, and the content box will shrink to absorb
that extra width. This typically makes it much easier to size
elements.
Related
EDIT: Not a duplicate of:
Make child element (with padding) 100% width and height of parent
In that question, the person was in need of the box-sizing: border-box model. I already got that model on my snippet.
What I'm trying to wrap my head around is the fact that, when you're using the border-box model with padding and/or border set to the parent, a child with 100% of height/width will only inherit the content-box height/width of the parent, and not the proper height/width (element's inspected height/width) itself. Because if you inspect the parent in my snippet, you'll see height/width set to 100px. And the child will be 80px. So, how come 100% of a height/width of 100px could be equal to 80px? That was counter-intuitive for me, but I think the answer is on the bold parts of the MDN quote below.
MDN Source: box-sizing
By default in the CSS box model, the width and height you assign to an
element is applied only to the element's content box. If the element
has any border or padding, this is then added to the width and height
to arrive at the size of the box that's rendered on the screen. This
means that when you set width and height, you have to adjust the value
you give to allow for any border or padding that may be added.
The box-sizing property can be used to adjust this behavior:
content-box gives you the default CSS box-sizing behavior. If you set
an element's width to 100 pixels, then the element's content box will
be 100 pixels wide, and the width of any border or padding will be
added to the final rendered width.
border-box tells the browser to
account for any border and padding in the values you specify for an
element's width and height. If you set an element's width to 100
pixels, that 100 pixels will include any border or padding you added,
and the content box will shrink to absorb that extra width. This
typically makes it much easier to size elements.
Original Question
I've been faced with a situation where a child element's width and height are set to 100% of the parent's width and height. And I'm using box-sizing: border-box;
Can somebody explain why that happens?
From MDN Docs on box-sizing, we get that:
border-box tells the browser to account for any border and padding in
the values you specify for an element's width and height. If you set
an element's width to 100 pixels, that 100 pixels will include any
border or padding you added, and the content box will shrink to absorb
that extra width. This typically makes it much easier to size
elements.
So in the following snippet, I was expecting that the child would cover completely the parent, because it would have width and height set to 100% of the parent. But that is not the case. The child gets 100% of the parent's height and width minus border and padding.
Question
If you inspect the elements (rendered by the snippet) you'll see that the parent height and width is 100px and the child is only 80px. Shouldn't it be also 100px, since it's set to 100%? Why this happens?
100% of the height is only related to the content box?
const parent = document.getElementById('parentDiv');
const child = document.getElementById('childDiv');
const parentStyle = window.getComputedStyle(parent);
const childStyle = window.getComputedStyle(child);
document.getElementById('description1').innerHTML = 'The parent height is: ' + parentStyle.height;
document.getElementById('description2').innerHTML = 'The child height is: ' + childStyle.height;
document.getElementById('description3').innerHTML = 'The parent width is: ' + parentStyle.width;
document.getElementById('description4').innerHTML = 'The child width is: ' + childStyle.width;
* {
margin: 0;
padding: 0;
}
div {
box-sizing: border-box;
}
#parentDiv {
border: 5px dotted black;
background-color: red;
width: 100px;
height: 100px;
padding: 5px;
}
#childDiv {
background-color:blue;
width: 100%;
height: 100%;
border: 5px dotted green;
}
<div id="parentDiv">
<div id="childDiv"></div>
</div>
<h3>Height</h3>
<div id="description1"></div>
<div id="description2"></div>
<h3>Width</h3>
<div id="description3"></div>
<div id="description4"></div>
I have an a sidenav for my AngularJs application with a width of 75px. I need the margin to be equal on the container of the content so I have added extra margin onto the left margin (which varies depending on the viewport size), to compensate for the sidenav, and given the auto value to the right, like so:
.container { width: 92.5%; margin: 0 auto 0 9.5rem; } //right auto, left 9.5rem
Issue is that depending on viewport size, the right margin isn't always equal to the left. I can adjust the margin so it is equal, for lets say, 992px, but as soon as I increase/decrease the size, the right side is no longer equal and the container visually looks unbalanced.
Question
What CSS property do I use to maintain an equal margin on both sides when I have to use a static value for the left margin?
Here's the JSFiddle
The problem is that your app-container starts from the body and not from your container, you can add this, then it will be equal and not break the container
.app-container {
padding: 0 1%;
width: calc(100% - 75px);
left: 75px;
position: absolute;
}
A better solution is "the bootstrap way" (use bootstrap or something similar - all float:left, and define width in percentages)
3 div.
body margin of 10px.
Picture on the bottom
I want the divs to equally have the same width, the same margins on the sides while also covering/using the whole browser's width whichever size it is (desktop, tablet, mobile)
Here's what I did by using pourcentage and what I believe:
" The full browser width is 100%
If the div's margin are 10px and the body's margin are 10px then
The div's width would be around 30%.
Let's try 30%.
It fits - blank space too.
Let's try 30.5%.
Blank space, it's not equal on the sides.
Let's put 32%.
etc. "
but often I get extra blank space on the right or one div to go down because it's actually too wide.
Is there a more simple way to do this? Properties?
Thank you.
Design:
Media queries:
Your issue stems from the fact that you are mixing relative units with absolute ones - pixels are an absolute unit as 10px is always 10px, but a percentage is relative to the screen width, so no matter how close you can get it to fitting the full width of the screen, as soon as you change the width of the screen all of the values are going to change.
You have (at least) two options here:
First, switch all your units to percentages, so that every measurement is relative to the width of the screen. In other words, if you use percentage based margins, you will know exactly how much space you can allocate to each thing.
Alternatively, if you really need the margins to be an absolute pixel width, use CSS calc:
This feature of CSS allows you to mix unit types easily, and let the browser do the math to figure it out.
For example:
width: calc(33.333% - 20px);
will style the div to take up one third of the screen width, minus the width of a 10px margin on the left and a 10px margin on the right.
If all three divs have this width, the total space taken up will equal to 100% of the screen, with the space for all of the margins accounted for.
(if you want the first and last divs to have no margin on the left and right respectively, just change the calculation to match!)
More Information About 'Calc'
Extra tip! Remember that white-space in your code will add spaces in between your elements, so if you style everything to fill exactly 100% width, these extra spaces may still cause your items to break if you have not dealt with this
I would say the best way to approach this is have container elements for each div, so a structure like this:
<div class="container-full">
<div class="container-third">
<div class="content">
Hello world
</div>
</div>
</div>
.container-full{
width: 100%;
}
.container-third{
width: 33.33%;
padding: 10px;
}
.content{
width: 100%;
}
Utilize padding, instead of margin. Make sure to use box-sizing: border-box
display:flex is already widely suported, so you can rely on that instead of floats.
if you don't use box-sizing:border-box; for all the elements - you could at least for the divs in question along with a 10px padding.
Here goes sass:
.container {
display:flex;
& > div{
flex:0 0 33.33%;
padding: 10px;
box-sizing: border-box;
}
}
or you could use a percentage margin between the divs.
.container div{
width:30%;
float:left;
margin-right:5%;
}
.container div:last-child{
margin-right:0;
}
I've set my html body tag heigth to be 100% but in Firefox that shows as a few more pixels than the screen has, so a nav scroll bar appears. How can I adjust that other than specifiying an arbitrary height :98%? I've set padding and margin to zero.
I'm using only bootstrap for css, if that's of any importance.
Check elements inside the body. One of it probably has margins or even content goes outside the body element. Just try to delete all inner elements one by one in Firefox's dev.tools and notice what element deletion will solve the problem.
Just to follow up the answer above, I noticed that padding can cause the same effect, but can only be noticed when inspecting the elements.
<button class="sbtn">
<span class="text">
my btn
</span>
</button>
.sbtn {
height: 5vh;
background-color: red;
}
.text {
padding: 10vh;
color: white;
}
Try adding this to your main CSS file.
/* CSS */
* {
box-sizing: border-box;
}
border-box tells the browser to account for any border and padding in the values you specify for an element's width and height. If you set an element's width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width. This typically makes it much easier to size elements.
CSS box sizing
This question already has answers here:
How to make an element width: 100% minus padding?
(15 answers)
CSS 100% height with padding/margin
(15 answers)
Closed 3 years ago.
I have been searching around but I can't find a solution to apply to my own problem.
I am working on a mobile website and need the input boxes to be 100% width of the screen. But I have padding-left: 16px and margin: 5px that makes the boxes go outside of the screen so I have to scroll to the right to see the end of the box. How do I make the boxes 100% minus the padding and margin?
To try it out: http://jsfiddle.net/wuSDh/
You can use calc, modern browsers support it and IE9+ as well.
div {
margin: 10px;
width: calc(100% - 20px);
height: 10px;
background: teal;
}
<div></div>
Browser support
Block level elements naturally fill their parent, however if you specifically set width, you override this behavior, allowing margin and border to be added to the specified width. You specify 100% width on the body, thus giving an opportunity for it to overflow the document horizontally if there is an element rendered to it's right inner edge.
Example: http://jsfiddle.net/trex005/6earf674/
The simple remedy to this is to stop declaring the body's width. If for some reason this is required, you can set the margin to 0;
The same principle applies to the input, but it is a little more complicated. Inputs(text/password) and textareas, even when set to display as block will derive their widths from size and cols respectively. This can be overridden by specifying a width in CSS, however they also have user agent specified borders and margins so you have the overflow problem again. To fix this overflow, you need to set the input's display to block and it's box-sizing:border-box. Border box will calculate the borders and padding as part of the width.
input[type="text"], input[type="password"] {
width: 100% !important;
margin: 5px !important;
box-sizing:border-box;
display:block;
}
Once you do that, you will notice there is extra spacing between the elements. This is because the display:block forces the line break, and the <br> tags that you added are redundant. Remove those, and you are in business!
Demo: http://jsfiddle.net/trex005/6earf674/1/
I had this issue with 100% heights, and eventually it struck me that the answer is to use a padding on the element above the 100% height/width (i.e. the parent).
<div style="padding: 1rem;">
<div style="height:100%; width:100%">
<p>The cat sat on the mat</p>
</div>
</div>
In short, the padding of the parent has the same effect as the margin of the child!
Looe the width:100%; then simply use as much padding as you like:
#login_box {
padding:10px;
margin:50px;
}
Demo
http://jsfiddle.net/PFm3h/
Isolated effect:
Demo
http://jsbin.com/ozazat/1/edit
Lots of padding, lots of margin, no problem at all.
Another solution is to position the INPUT’s absolute and add left/right props:
#login_box {
width: 100%;
position:relative;
}
input[type="text"], input[type="password"] {
position:absolute;
left:5px;
right: 5px
}
You would need to adjust margins etc, since they will be out of the relative layout flow. You can also add padding without trouble, since you didn’t set a fixed width.
This technique is widely supported in all browsers.
Demo: http://jsfiddle.net/wuSDh/3/
You can adjust your textbox width 100% to 95% .Now it's looking good
input[type="text"], input[type="password"] {
width: 95% !important;
margin: 5px !important;
}
See this : http://jsfiddle.net/wuSDh/