I made a parent div and three childs div inside it,
i want to make the three childs in a row by float with some margin between each other,
i made the box-sizing property to be border-box, but the property doesn't work so the margin property value is added to the width value as shown in the image, what is the problem?
* {
margin: 0px;
padding: 0px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
div.child {
float: left;
background-color: black;
width: 200px;
margin: 8px;
text-align: center;
color: white;
}
<div>
<div class="one child">one</div>
<div class="two child">two</div>
<div class="three child">three</div>
</div>
margin is added in all box models. Only border and padding can be included.
Also, you shouldn't try to implement layouts using float in 2022.
Use flex box, or CSS grid:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.child {
background-color: black;
text-align: center;
color: white;
}
.parent {
display: grid;
grid-template-columns: repeat(3, 200px);
gap: 8px;
}
<div class="parent">
<div class="child">one</div>
<div class="child">two</div>
<div class="child">three</div>
</div>
Related
It's possible to obtain the following masterpiece of recursive positioning of DIVs
by using the following code.
html, body { width: 100%; height: 100%; margin: 0; }
.outer {
width: 100%; height: 100%;
display: flex; flex-direction: column;
}
.inner {
margin: 10px;
border: 10px solid gray; border-radius: 10px;
display: flex; flex-direction: column;
flex: 1;
}
<div class="outer">
<div class="inner">
<div class="inner">
<div class="inner">
</div>
</div>
</div>
</div>
But something is odd about it. My attempts to display a border for the outer box fail (and box-sizing: border-box; doesn't help).
Can you modify this code to use styling for just html, body as well as one-box, where one-box would be used for both the outer DIV as well as an arbitrary nesting of inner DIVs?
Or does HTML5/CSS3 really require this baroque treatment of the base case when recursively nesting DIVs?
My attempt:
html, body {
width: 100%; height: 100%; margin: 0;
box-sizing: border-box;
}
.one-box-to-rule-them {
width: 100%; height: 100%;
display: flex;
flex-direction: column;
flex: 1;
margin: 10px;
border: 10px solid gray; border-radius: 10px;
box-sizing: border-box;
}
<div class="one-box-to-rule-them">
<div class="one-box-to-rule-them">
<div class="one-box-to-rule-them">
<div class="one-box-to-rule-them">
</div>
</div>
</div>
</div>
fails. Adding a border to the outer box using a unified box makes the boxes go out of bounds.
Explanation
A teacher who solves the problem I was having is valuable. A teacher who (also) points out how my knowledge was misleading me is invaluable. There are at this moment four (nice and correct) answers, but the insight into what I was misunderstanding is provided in a comment made by Temani Afif. Let me illustrate it with a diagram.
My mistake was thinking that when one changes box-sizing from its default content-box and specifies instead box-sizing: border-box;, the box calculation includes all four, content, padding, border, and margin. As its names implies, box-sizing: border-box; includes in the calculation the border-box. It does not include the margin.
You can rely on flexbox and the default stretch alignment to do this without the need of specifying height or width or box-sizing:
body {
height: 100vh;
margin: 0;
display: flex;
}
.inner{
margin: 8px;
border: 8px solid gray;
border-radius: 10px;
display: flex;
flex-grow: 1;
}
<div class="inner">
<div class="inner">
<div class="inner">
<div class="inner">
<div class="inner">
</div>
</div>
</div>
</div>
</div>
Remove the width: 100% from all elements, replace margins with paddings, and remove the redundant flex rules:
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
margin: 0;
}
.one-box-to-rule-them {
height: 100%;
padding: 10px;
border: 10px solid gray;
border-radius: 10px;
}
<div class="one-box-to-rule-them">
<div class="one-box-to-rule-them">
<div class="one-box-to-rule-them">
<div class="one-box-to-rule-them">
</div>
</div>
</div>
</div>
Your problematic rule is margin because no matter if you set your box-sizing to border-box, margin is never included in the dimensions of the element in the box-model, it is basically "outer-spacing". You also don't need the flexbox rules for what you want! But of course you need some kind of spacing for your desired effect, I therefore chose to create a pseudo-element that will receive the border, position it absolutely to fit the dimensions of the parent and give the parent a double-border-width padding to mimic the spacing you had before:
html, body {
width: 100%; height: 100%; margin: 0;
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
.one-box-to-rule-them {
height: 100%;
padding: 20px;
position: relative
}
.one-box-to-rule-them:before {
border: 10px solid gray; border-radius: 10px;
content: '';
position: absolute; top: 0; right: 0; bottom: 0; left: 0;
}
<div class="one-box-to-rule-them">
<div class="one-box-to-rule-them">
<div class="one-box-to-rule-them">
<div class="one-box-to-rule-them">
</div>
</div>
</div>
</div>
EDIT: #Ori Drori solution is cleaner, but uses the two-classes approach, mine uses just one but is more "ugly" CSS (in my opinion) =D
EDIT: #Temani Afif should be the accepted solution!
Is this what you want?
if I understand it correctly the the problem with width 100% only
Like this:
html, body { height: 100%; margin: 0; }
.outer {
height: 100%;
display: flex; flex-direction: column;
}
.inner {
margin: 10px;
border: 10px solid gray; border-radius: 10px;
display: flex; flex-direction: column;
flex: 1;
}
<div class="outer">
<div class="inner">
<div class="inner">
<div class="inner">
</div>
</div>
</div>
</div>
This question already has an answer here:
Margin collapsing with floated element, why there is an extra margin added?
(1 answer)
Closed 3 years ago.
I would like to create a conainer element, which is at least the height of the page. I set it like this: min-height: 100vh
The body has no margin.
For some reason, an empty space appears under the element. How is it possible to eliminate that?
I can observe this error in Chrome and Edge, but not in Firefox.
My code:
body {
margin: 0;
background: red;
}
.container {
margin: auto;
max-width: 200px;
background: gray;
min-height: 100vh;
box-sizing: border-box;
}
.item {
background: white;
margin-bottom: 1em;
height: 100px;
}
<div class="container">
<div class="item">...</div>
<div class="item">...</div>
<div class="item">...</div>
</div>
This is how it looks like:
You can get it to work by removing the margin of the last .item element.
body {
margin: 0;
background: red;
}
.container {
margin: auto;
max-width: 200px;
background: gray;
min-height: 100vh;
box-sizing: border-box;
}
.item {
background: white;
margin-bottom: 1em;
height: 100px;
}
.item:last-child {
margin:0;
}
<div class="container">
<div class="item">...</div>
<div class="item">...</div>
<div class="item">...</div>
</div>
The issue is caused by the .container margin to center with auto and the .item children having a bottom margin. For some reason the causing a lack of collapse which is, in turn, causing the margin to overflow (or append to) it's owner, even if margin-bottom: 0 is applied to .container.
To resolve this, we have come up with a different way, by not using margin: auto;, of centering the .container.
As well as, to force a collapse by setting a height relationship between culprit of the overflow and it's parent. We will accomplish this by setting height: 100%; to html, body.
I will propose three solutions which solve the display discrepancy.
Option 1
Edit: This solution does not seem to be consistent to me in Edge upon further testing. Sometimes I have to open DevTools and toggle min-height: 100vh; in .container to get it to render correctly.
html, body {
height: 100%;
}
.container {
/* Remove the margin */
/* margin: auto; */
position: relative;
left: 50%;
transform: translateX(-50%);
This fixes the issue in Edge and Chrome. To answer the question, this is the only edit required.
jsFiddle
html,
body {
height: 100%;
}
body {
margin: 0;
background: red;
}
.container {
position: relative;
left: 50%;
transform: translateX(-50%);
min-height: 100vh;
max-width: 200px;
background: grey;
}
.item {
position: relative;
margin-bottom: 1em;
height: 100px;
background: white;
}
<div class="container">
<div class="item">...</div>
<div class="item">...</div>
<div class="item">...</div>
</div>
Option 2
This method is a slight modification to how the .item margin is applied where we will apply to all .item's except the last one using :not(last-child).
jsFiddle
html, body {
height: 100%;
}
body {
margin: 0;
background: red;
}
.container {
margin: auto;
min-height: 100vh;
max-width: 200px;
background: grey;
}
.item {
position: relative;
height: 100px;
background: white;
}
.item:not(:last-child) {
margin-bottom: 1em;
}
<div class="container">
<div class="item">...</div>
<div class="item">...</div>
<div class="item">...</div>
</div>
Option 3
If you're familiar with Flexbox, you could solve it that way with the following edits to your CSS:
body {
margin: 0;
background: red;
display: flex;
flex-direction: column;
justify-content: center;
}
.container {
/* Without a min height set the width
/* will default to the content's width */
/* max-width: 200px; */
width: 200px;
margin: auto;
background: gray;
min-height: 100vh;
box-sizing: border-box;
}
.item {
position: relative;
margin-bottom: 1em;
height: 100px;
background: white;
}
<body>
<div class="container">
<div class="item">...</div>
<div class="item">...</div>
<div class="item">...</div>
</div>
</body>
Here, we set body as flexbox, set as column direction, and center the content (direct children).
Importantly, we have to set a minimum width so that if our content is less than 200px it won't get squished.
You can just set height: 100% on the container for it to be the height of the page at all times.
The below modified code should help you. Set margin: 0 in the html and body elements
html, body { /* or use * to apply this margin reset to all elements */
margin :0;
}
body{
background: red;
}
.container {
margin: auto;
max-width: 200px;
background: gray;
height:100vh;
box-sizing: border-box;
}
.item {
background: white;
margin-bottom: 1em;
height: 100px;
}
<div class="container">
<div class="item">...</div>
<div class="item">...</div>
<div class="item">...</div>
</div>
You might try to add some padding to your .item
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 6 years ago.
Why is there a margin between divs? I tried to remove it by different methods but nothing worked. I had to reduce their width to stack them in rows.
*{
box-sizing: border-box;
}
.wrapper{
background-color: #ccc;
width: 500px;
margin: 5% auto;
padding: 0;
}
.box{
display: inline-block;
margin: 0px;
background-color: #f1f1f1;
width: 248px;
height: 250px;
border: 0 !important;
font-size: 0;
}
<div class="wrapper">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
Make the width of .box 250px and add an attribute of 'float: left' to .box
.box{
display: inline-block;
margin: 0px;
padding: 0;
background-color: #ff9900;
width: 250px;
height: 250px;
float: left;
}
Fiddle
Due to your display: inline-blocks, the white spaces appear in between your block elements.
There are many resolutions to the same, refer to David Walsh's blog
What I would prefer to do here is use float instead of display: inline-block.
Refer code:
*{
box-sizing: border-box;
}
.wrapper{
background-color: #ccc;
width: 500px;
margin: 5% auto;
padding: 0;
}
.box{
float: left;
margin: 0px;
background-color: #f1f1f1;
width: 248px;
height: 250px;
}
<div class="wrapper">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
The problem is that there are spaces between the div's. Two possible solutions:
1:
<div class="wrapper">
<div class="box">
</div><div class="box">
</div><div class="box">
</div><div class="box">
</div>
</div>
-
.box { display: block; } // not multiple elements in one line, if you want this
2:
.wrapper { font-size: 0px; }
.box { display: block; } // not multiple elements in one line, if you want this
Its not margin what is causing space between two div its because of display:inline-block which you have added to box class, just add float: left; to same and it will go away.
*{
box-sizing: border-box;
}
.wrapper{
background-color: #ccc;
width: 500px;
margin: 5% auto;
padding: 0;
}
.box{
display: inline-block;
margin: 0px !important;
background-color: #f1f1f1;
width: 248px;
height: 250px;
border: 0 !important;
float: left;
}
<div class="wrapper">
<div class="box" style="background: rebeccapurple;">
</div>
<div class="box" style="background: orange;">
</div>
<div class="box" style="background: orange;">
</div>
<div class="box" style="background: rebeccapurple;">
</div>
</div>
Try setting border: 0 !important on all divs affected, once I had a similar problem and found that the divs were inheriting a 1px border that was breaking the width.
You are displaying them as inline blocks, so the white space between them in the formatting of your code is still being displayed just as it would had they been any other inline element.
You need to reformat your code, or set the wrapper to have a zero font size so they do not get rendered.
Try using
*{
box-sizing: border-box;
}
.wrapper{
background-color: #ccc;
width: 500px;
margin: auto;
padding: 0;
display: block;
background: green;
}
.box{
display: block;
margin: 0px;
width: 248px;
height: 250px;
background: red;
padding: 0;
float: left;
}
Display: inline-block creating that margin.
Or may be you could try
.wrapper{font-size: 0;}
.box{ display:inline-block;}
First div should fill up remaining height that's left while second div should be positioned at the bottom with it's initial height.
DEMO:
.container {
width: 240px;
height: 400px;
background: #E0E0E0;
display: flex;
flex-direction: column;
}
.first {
border :1px solid black;
padding: 1em;
box-sizing: border-box;
}
.second {
border: 1px solid blue;
padding: 1em;
box-sizing: border-box;
}
<div class="container">
<div class="first">
I SHOULD FILL WHATS REMAINING AFTER SECOND ONE
</div>
<div class="second">
<div>
I SHOULD BE AT THE BOTTOM FILLING ONLY MY OWN HEIGHT
</div>
</div>
The answer to this would vary from markup to markup, but in your case you can just add this to your first element:
height: 100%;
This works because of your flex display property of the container. A different property on the container would likely require another solution.
Demo
Full code
.container {
width: 240px;
height: 400px;
background: #E0E0E0;
display: flex;
flex-direction: column;
}
.first {
height: 100%;
border :1px solid black;
padding: 1em;
box-sizing: border-box;
}
.second {
border: 1px solid blue;
padding: 1em;
box-sizing: border-box;
}
<div class="container">
<div class="first">
I SHOULD FILL WHATS REMAINING AFTER SECOND ONE
</div>
<div class="second">
<div>
I SHOULD BE AT THE BOTTOM FILLING ONLY MY OWN HEIGHT
</div>
</div>
You need to make height auto to container class so depend on length of string your height is increase.
<style>
.container {
width: 240px;
height: auto;
background: #E0E0E0;
display: flex;
flex-direction: column;
}
.first {
border :1px solid black;
padding: 1em;
box-sizing: border-box;
}
.second {
border: 1px solid blue;
padding: 1em;
box-sizing: border-box;
}
</style>
<div class="container">
<div class="first">
I SHOULD FILL WHATS REMAINING AFTER SECOND ONE
</div>
<div class="second">
<div>
I SHOULD BE AT THE BOTTOM FILLING ONLY MY OWN HEIGHT
</div>
</div>
I have a two column layout. Because flex layout isn't supported by all browsers we want to support, I used display: table and display: table-cell.
My current problem is that if I modify the top padding of #sidebar > div > div, the MAIN content is affected, but it shouldn't be. So there are two questions:
Why is MAIN affected by a change of #sidebar > div > div's top padding?
How can I achieve that it's not affected?
HTML
<div id="wrapper">
<div id="sidebar">
<div class="inner">
<div>TEST</div>
<div>TEST</div>
<div>TEST</div>
<div>TEST</div>
</div>
</div>
<div id="content">
<div class="inner">MAIN</div>
</div>
</div>
CSS
body {
background: #ecf0f1;
margin: 0;
padding: 0;
font-family: sans-serif;
}
*, *:before, *:after {
box-sizing: border-box;
}
#wrapper {
display: table;
}
#sidebar {
display: table-cell;
background: #2c3e50;
color: #ecf0f1;
width: 200px;
}
#content {
display: table-cell;
background: #ecf0f1;
color: #2c3e50;
}
.inner {
min-height: 100vh;
padding: 0px 10px;
}
#sidebar > div > div {
padding: 5px;
padding-top: 50px;
margin: 1px 0;
}
jsFiddle — just modify the padding there.
Because you didn't specify vertical-align:top; for the MAIN div.
#content {
display: table-cell;
background: #ecf0f1;
color: #2c3e50;
vertical-align:top;
}
jsFiddle example
The default vertical-alignment is baseline, which is what you had ended up seeing.