CODEWITHSUNDEEP
htmlcss
Andrew Li
Andrew Li

Reputation: 1055

Css about floated div's parent

I've the web page like the below layout. The content of css file is following.

#green{
border:20px solid #3D3;
float:left;
display:block;
}
#orange{
width:100px;
height:100px;
border:10px solid orange;
float:left;
}

.child{
 border:10px solid black;
 display:inline-block;
 margin:0px;
}
.parent{
  border:10px solid #f00;
  display:table;
  padding:0px;
  margin:0px;
  }

  .clear{
   clear:both;
  }

The html content is following.

 <div class="parent">
  <div class="child">
   <div id='green'> </div>
   <div id="orange"></div>
   <div class="clear"> </div>
  </div>
 </div>

I've gotten the rendering result as following.

enter image description here

why do I have white gap in the layout?
I've not added any white color gap in the div tag.
Please help me.
Thanks.

Upvotes: 1

Views: 36

Answers (2)

Jishnu V S
Jishnu V S

Reputation: 8409

Fighting the Space Between Inline Block Elements ,The reason you get the spaces is because, well, you have spaces between the elements (a line break and a few tabs counts as a space, just to be clear). Minimized HTML will solve this problem, you can simply fix this font-size:0 property , check the reference site https://css-tricks.com/fighting-the-space-between-inline-block-elements/

.parent {
  font-size:0;
}

see the attached snippet

#green {
	border: 20px solid #3D3;
	float: left;
	display: block;
}
#orange {
	width: 100px;
	height: 100px;
	border: 10px solid orange;
	float: left;
}
.child {
	border: 10px solid black;
	display: inline-block;
	margin: 0px;
}
.parent {
	border: 10px solid #f00;
	display: table;
	padding: 0px;
	margin: 0px;
    font-size:0;
}
.clear {
	clear: both;
}
<div class="parent">
  <div class="child">
    <div id='green'> </div>
    <div id="orange"></div>
    <div class="clear"> </div>
  </div>
</div>

Upvotes: 0

ADH - THE TECHIE GUY
ADH - THE TECHIE GUY

Reputation: 4373

that is happened because you set parent display property to table and child display property to inline-block . just remove display:inline-block; property of your div.child ,it works fine.I'm added the snippet below.

#green{
border:20px solid #3D3;
float:left;
display:block;
}
#orange{
width:100px;
height:100px;
border:10px solid orange;
float:left;
}

.child{
 border:10px solid black;
 /*display:inline-block;*/
 margin:0px;
}
.parent{
  border:10px solid #f00;
  display:table;
  padding:0px;
  margin:0px;
  }

  .clear{
   clear:both;
  }
<div class="parent">
  <div class="child">
   <div id='green'> </div>
   <div id="orange"></div>
   <div class="clear"> </div>
  </div>
 </div>

Upvotes: 1

Related Questions