0

Three div.sons were put vertically with no blank between them. Here is the css code and displayed image.

<html>
<header>
<style type="text/css">
div.father {
  border: 1px solid black;
  height: 364px;
  width: 364px;

}
div.son {
  border: 1px solid black;
  height: 100px;
  width: 100px;
  padding-top:20px;
  padding-left:20px;
}
</style>

</header>
<body>
    <div class="father">
    <div class="son">box1</div> 
    <div class="son">box2</div>
    <div class="son">box3</div>
    </div>
</body>
</html>

enter image description here

There is no blank between div.sons for the vertically displayed div.son.

Now let's make all div.sons horizontally displayed.

<html>
<header>
<style type="text/css">
div.father {
  border: 1px solid black;
  height: 364px;
  width: 400px;

}
div.son {
  margin:0px;
  padding:0px;
  border: 1px solid black;
  height: 100px;
  width: 100px;
  padding-top:20px;
  padding-left:20px;
  display:inline-block;
}
</style>

</header>
<body>
    <div class="father">
    <div class="son">box1</div> 
    <div class="son">box2</div>
    <div class="son">box3</div>
    </div>
</body>
</html>

The displayed image is as the following.

enter image description here

How to remove all the blank between div.sons for the horizontally displayed image?

showkey
  • 482
  • 42
  • 140
  • 295
  • 3
    Possible duplicate of [How to remove the space between inline-block elements?](http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements) – Prinzhorn Jan 31 '16 at 09:21
  • Add `vertical-align: top;` to `div.son` – Asons Jan 31 '16 at 09:29

4 Answers4

3

add float: left; for son class in css

Mohammed Alasa'ad
  • 539
  • 5
  • 21
1

One problem that arrises when you use inline-block is that whitespace in HTML becomes visual space on screen.

There are a few ways to remove that space

Like this: https://jsfiddle.net/j6rcfkmz/

mhsankar
  • 423
  • 5
  • 18
0

Also Flexbox can be used.

.son {
  display: flex;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  border: 1px solid red;
}
.son li {
  list-style:none;
  width: 200px;
  height: 200px;
  border: 1px solid green;
}
<ul class="son">
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>
CodeRomeos
  • 2,428
  • 1
  • 10
  • 20
0

This is a common issue with using display inline-block, instead of this you should use float left on the elements with the class of 'son'.

user5863517
  • 1