Empty space on the site between blocks

Question

I started writing a site

*{ margin: 0; padding: 0; } #alive{ display: inline-block; width: 25%; height: 1000px; background-color: rgb(255, 128, 0); } #mid{ display: inline-block; width: 49%; height: 1000px; background-color: red; } #rhyme{ display: inline-block; width: 25%; height: 1000px; background-color: rgb(255, 128, 0); }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="ccc.css" type="text/css"/> </head> <body> <div> <div id="alive"></div> <div id="mid"></div> <div id="rhyme"></div> </div> </body> </html>

But between the blocks there is a small empty space, I can not understand where it comes from?

These are line breaks between divs that are written in your code
You have in the code hyphens that you made Enter'om - so they are displayed

Answer 1 · 2019-03-31T11:30:47

For some reason, you set inline behavior for blocks, and they have "letter-letter" intervals (like any string elements).

There are different solutions to this problem. For example, simply comment out these indents:

 *{ margin: 0; padding: 0; } #alive{ display: inline-block; width: 25%; height: 1000px; background-color: rgb(255, 128, 0); } #mid{ display: inline-block; width: 49%; height: 1000px; background-color: red; } #rhyme{ display: inline-block; width: 25%; height: 1000px; background-color: rgb(255, 128, 0); }

 <div id="alive"></div><!-- --><div id="mid"></div><!-- --><div id="rhyme"></div>

But it is better to use flex or float if you need to line up the blocks. Setting them inline-block is not a good solution.

mymedia mymedia 7,045 2 gold marks 21 silver marks 44 bronze marks · Answer 2 · 2019-03-31T11:42:00

Another cool way to get rid of spaces is to make them zero size using font-size: 0px on the container. However, in the future it is necessary not to forget to return to the descendants the default font size.

 * { margin: 0; padding: 0; } .line { font-size: 0; } .line > * { font-size: initial; } #alive { display: inline-block; width: 25%; height: 1000px; background-color: rgb(255, 128, 0); } #mid { display: inline-block; width: 49%; height: 1000px; background-color: red; } #rhyme { display: inline-block; width: 25%; height: 1000px; background-color: rgb(255, 128, 0); }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="ccc.css" type="text/css"/> </head> <body> <div class="line"> <div id="alive"></div> <div id="mid"></div> <div id="rhyme"></div> </div> </body> </html>

Answer 3 · 2019-03-31T19:47:51

It is best to use the flex-box as Qlasandr said .

Flexbox guide - link

This issue is solved in a couple of lines:

 .parent{ width: 100%; display: flex; flex-direction: row; height: 1000px; } #alive{ width: 25%; background-color: rgb(255, 128, 0); } #mid{ width: 50%; background-color: red; } #rhyme{ width: 25%; background-color: rgb(255, 128, 0); }

 <div class="parent"> <div id="alive"></div> <div id="mid"></div> <div id="rhyme"></div> </div>

Lyuba Ivanova Lyuba Ivanova 655 2 silver marks 14 bronze marks · Answer 4 · 2019-03-31T12:29:50

The usual hack everyone knows - you put comments between the blocks

 *{ margin: 0; padding: 0; } #alive{ display: inline-block; width: 25%; height: 1000px; background-color: rgb(255, 128, 0); } #mid{ display: inline-block; width: 49%; height: 1000px; background-color: red; } #rhyme{ display: inline-block; width: 25%; height: 1000px; background-color: rgb(255, 128, 0); }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="ccc.css" type="text/css"/> </head> <body> <div> <div id="alive"></div><!-- --><div id="mid"></div><!-- --><div id="rhyme"></div> </div> </body> </html>

@LyubaIvanova, you really have a very similar answer, given an hour later than another.
In essence, this, it seems, is not prohibited, but is not encouraged, especially by other participants)

Empty space on the site between blocks

4 answers 4

More articles: