How to press the blocks to each other?

ul { text-align: center; } li { list-style: none; display: inline-block; border:1px solid #000; } 
 <ul> <li>1</li> <li>2</li> <li>3</li> </ul>

http://codepen.io/anon/pen/OyGaVX

3 answers 3

The fact is that inline-blocks are like words.
If there are white space characters in the markup, the browser will display a space.

I will list a few normal ways to remove gaps.
There is an armful of not too normal - I will not say anything about them.

Write them in a row

 ul { text-align: center; } li { list-style: none; display: inline-block; border:1px solid #000; } 
 <ul> <li>1</li><li>2</li><li>3</li> </ul>

Or so

 ul { text-align: center; } li { list-style: none; display: inline-block; border:1px solid #000; } 
 <ul> <li> 1 </li><li> 2 </li><li> 3 </li> </ul>

Use comments

 ul { text-align: center; } li { list-style: none; display: inline-block; border:1px solid #000; } 
 <ul> <li>1</li><!-- --><li>2</li><!-- --><li>3</li> </ul>

Do not close li explicitly

 ul { text-align: center; } li { list-style: none; display: inline-block; border:1px solid #000; } 
 <ul> <li>1 <li>2 <li>3 </ul>

Addition

In css, there is no honest way to not show spaces between elements at all. There is a crutch with a font-size om (described in the next answer ), which not only ruins the inheritance of the font size, but also does not work in some browsers; There is a crutch with word-spasing / letter-spacing / margin , in which it is not only that each browser has its own design, but it is also attached to the font, since the width of the space is different in different fonts. Removing the space from the markup is an honest way, the others are not. And if you only need css, then you should abandon the inline-block and use flex or float , but this is not the question.

But what happens to those who think otherwise.

Just in case I will give an option using flexbox

There is no markup binding here, however, the flex-box is in some way similar to tables and is not recommended for significant parts of the site (for example, layout) due to possible performance degradation. In addition, it is worth checking browser support and the need to use prefixes.

 ul { display: flex; justify-content: center; } li { list-style: none; border: 1px solid #000; } 
 <ul> <li>1</li> <li>2</li> <li>3</li> </ul>

  • one
    resetting the font-size much more normal than relying on the fact that the programmer will retain such markup when dragging on the engine, for example - xaja
  • @xaja, I have already commented in the next answer that in Opera 12 there is still a gap between the blocks. Even when changing the font size, you interrupt inheritance and have to explicitly specify it for elements. That is, it is no longer possible to change the font in one place - it is necessary in two places - we will prepare a stock of a rake in advance. And if the programmer is crooked and does not think that the markup should be preserved and what is not, then nothing will help. - Qwertiy ♦
  • Well, yes, let's minus the right decision and fence all sorts of crutches. - Qwertiy ♦
  • you have far from a complete answer, with a claim to complete. But to adjust the HTML layout of this kind is not crutches? - xaja
  • @xaja, in css there is no honest way not to show spaces between elements at all. There is a crutch with a font-size om, which not only ruins inheritance, but does not work in some browsers; There is a crutch with word-spasing / letter-spacing , in which it is not only that each browser has its own design, but it is also attached to the font, since the width of the space is different in different fonts. Removing the space from the markup is an honest way, the others are not. And if you only need css, then you should abandon the inline-block and use flex or float , but this is not the question. - Qwertiy ♦

There are a lot of solutions, http://codepen.io/anon/pen/megQVe is described in some detail here, the simplest is to change the font-size ul and li separately

 ul { text-align: center; font-size: 0px; } li { list-style: none; display: inline-block; border:1px solid #000; font-size: 16px; } 
 <ul> <li>1</li> <li>2</li> <li>3</li> </ul>

  • I look from Opera 12 - does not work. - Qwertiy ♦
  • Is there any hardware solution? - Onotol
  • @ Onotole, do not use inline-block and will not have to come up with :-) - Grundy
  • 2
    @ Ontole, what knows "hardware"? - Qwertiy ♦
  • and then how can you center everything in the center? - Onotol

 ul { text-align: center; } li { list-style: none; display: table-cell; border:1px solid #000; } 
 <ul> <li>1</li> <li>2</li> <li>3</li> </ul>

  • The font-size or the font itself will change, the width of the gap will be different and the end of this fit. - Qwertiy ♦
  • Even here it looks different. Opera 12 and Chrome in Windows draw a single border between elements, and FF in Linux Mint - a double one. - Qwertiy ♦
  • How about the version with "display: table-cell;" ? - WhiteHatWizard
  • one
    Yes, table-cell is possible, but it has table side effects. It stretches in content - overflow is difficult to use. The table-cell itself is clearfix. And something else, I do not remember to vskidku. If all this suits, then yes. - Qwertiy ♦