Remove unwanted spaces between 2divs using css
Hi I created this simple project:
body{
background: url("../imgs/bg_pattern.gif") scroll 0 0% repeat, url("../imgs/1.jpg") no-repeat scroll 0 0% / 100% 100%;
margin: auto;
}
#panel{
height: 100%;
width: 300px;
background-color: #232325;
float: right;
}
#audio{
width: 100%;
height: 11%;
background-color: red;
}
#term{
width: 100%;
height: 11%;
background-color: blue;
}
#content{
width: 100%;
height: 67%;
background-color: green;
}
#footer{
width: 100%;
height: 11%;
background-color: pink;
}
.term{
background-color: black;
height: 100%;
width: 25%;
display: inline-block;
border-right: solid red;
}
.term:first-child{
margin-left: 0;
}
.term:last-child{
border-right: none;
}
<div id="panel">
<div id="header">
<div id="audio"></div>
<div id="term">
<div class="term"></div>
<div class="term"></div>
<div class="term"></div>
<div class="term"></div>
</div>
</div>
<div id="content"></div>
<div id="footer"></div>
</div>
But when I see the result, div
those that are in terms div
have some space between them. Setting padding
and margin
to zero does not remove the space.
What needs to be done to remove the space to fit div
exactly next to each other?
source to share
One solution is to use in a container term
display: flex
:
body {
background: url("../imgs/bg_pattern.gif") scroll 0 0% repeat, url("../imgs/1.jpg") no-repeat scroll 0 0% / 100% 100%;
margin: auto;
}
#panel {
height: 100%;
width: 300px;
background-color: #232325;
float: right;
}
#audio {
width: 100%;
height: 11%;
background-color: red;
}
#term {
width: 100%;
height: 11%;
background-color: blue;
display: flex;/*Add display flex*/
}
#content {
width: 100%;
height: 67%;
background-color: green;
}
#footer {
width: 100%;
height: 11%;
background-color: pink;
}
.term {
background-color: black;
height: 100%;
width: 25%;
display: inline-block;
border-right: solid red;
}
.term:first-child {
margin-left: 0;
}
.term:last-child {
border-right: none;
}
<div id="panel">
<div id="header">
<div id="audio"></div>
<div id="term">
<div class="term">asd</div>
<div class="term">asd</div>
<div class="term">asd</div>
<div class="term">asd</div>
</div>
</div>
<div id="content"></div>
<div id="footer"></div>
</div>
Link
source to share
the problem is they Inline-block
have some default spaces,
use Float on the left better than Inline-block
, and use the clearfix class:
#term{
width: 100%;
height: 11%;
background-color: blue;
**overflow: hidden;**
}
.term{
background-color: black;
height: 100%;
width: 25%;
**float : left ;**
border-right: solid red;
}
source to share
As stated earlier, any white space between inline blocks is retained in the layout, so one way to get rid of it is to make sure that the inline block elements don't have any space in between in the HTML caption.
Also, you need to set the reference height so that the percentage height values work as expected. I did this by adding height: 100%
tags html
and body
.
Also, remember to add the height value to the element #header
, which makes arithmetic easier to deal with.
Thin point includes the right border of the elements .term
. You can use CSS calc
value or box-sizing: border-box
, you can also try.
html, body {
height: 100%; /* this may be needed... */
}
body{
background: url("../imgs/bg_pattern.gif") scroll 0 0% repeat, url("../imgs/1.jpg") no-repeat scroll 0 0% / 100% 100%;
margin: auto;
}
#panel{
height: 100%;
width: 300px;
background-color: #232325;
float: right;
}
#header {
width: 100%;
height: 22%;
}
#audio{
width: 100%;
height: 11%;
background-color: red;
}
#term{
width: 100%;
height: 50%;
background-color: blue;
}
#content{
width: 100%;
height: 67%;
background-color: green;
}
#footer{
width: 100%;
height: 11%;
background-color: pink;
}
.term{
background-color: black;
height: 100%;
width: calc(25% - 2px);
/* box-sizing: border-box; optional alternative */
display: inline-block;
border-right: 2px solid red;
}
.term:first-child{
margin-left: 0;
}
.term:last-child{
border-right: none;
width: 25%; /* you need to consider this... */
}
<div id="panel">
<div id="header">
<div id="audio"></div>
<div id="term">
<div class="term"></div><div class="term"></div><div class="term"></div><div class="term"></div>
</div>
</div>
<div id="content"></div>
<div id="footer"></div>
</div>
source to share