How to remove the blank between div.sons?


Tags: html,css

Problem :

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?



Solution :

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/


    CSS Howto..

    HTML/CSS - How do I make divs to size according to their contents?

    Compiling Bootstrap in LESS - How can I have a different navbar height for mobile?

    How to align Facebook, Twitter, Google+ and LinkedIn buttons on the right?

    How to define CSS styles if Javascript is turned off? [duplicate]

    CSS object shows under other objects when zoom

    How to stretch the form submit button using CSS?

    how to set the background color of the whole page in css

    CSS how to solve -webkit- functions

    how to download google fonts in version bold

    How to make the section and aside touch the footer?

    How to get rid of white space between css horizontal list items? [duplicate]

    How to cancel left or right rules with an !important tag?

    How to write specific CSS for mozilla, chrome and IE

    How to create a vertical line with a text in the middle

    How to disable .less (dotLess CSS) syntax analysis in ReSharper 6?

    how to make an interactive uploader like gmail and facebook have?

    How to extend the length of a page through CSS?

    How to display heading and paragraph elements inline in css?

    How to center images in div

    How to persist checking the screen width in Javascript

    How to make JQuery + CSS Verticle Tabs

    How to set backgroundImage property in css file in flex 4?

    How to center an iframe, responsive

    How to avoid a vertical dropdown menu to add the vertical scrollbar when at bottom?

    How to set jQuery draggable min/max-left and min/max-right

    How to use non-online images in CSS?

    How to mix colors in CSS?

    how to use css to style a descendant (not a direct child) of an element?

    Show header when at top of page - Scroll event re-firing issue

    How to force an empty page in a paged HTML document?