Почему html-страница не подходит для 100%?

Всякий раз, когда я хочу создать html-страницу, у меня проблема с этим, почему страница html меньше 100%? Позвольте мне объяснить в примере:

Почему последний div подходит к следующей строке? При всей ширине 10% означает, что мы можем добавить 10 div в строку, но в реальном мире это не произойдет ?! Я проверил все поля, дополнения, границы, но я ничего не видел. Не могли бы вы рассказать мне, почему это происходит?

Когда вы display: inline-block; он создает промежутки между ними. Используйте тот же код таким образом:

 
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text

Сценарий: http://output.jsbin.com/xorahifipe

Вы также можете использовать float: left , но вам нужно дать overflow: hidden; родителям, или как-нибудь очистите его. С вашим исходным примером float работает следующим образом:

 .row { width: 100%; /* This is not necessary */ margin: 0 auto; /* This is not necessary */ padding: 0; /* This is not necessary */ overflow: hidden; } .col-1 { width: 10%; margin: 0; /* This is not necessary */ padding: 0; /* This is not necessary */ float: left; } 

Скрипт: http://output.jsbin.com/daruzepiqa/1

Это потому, что display:inline-block создает белое пространство в html …

вы можете изменить display:inline-block to float:left

см. https://jsfiddle.net/z0cc6fp7/1/

Вы можете float divs вместо использования inline-block чтобы получить необходимый эффект.

  html, body { margin: 0; padding: 0; width: 100%; } .row { width: 100%; margin: 0; padding: 0; } .col-1 { width: 10%; margin: 0; padding: 0; float: left; } 
   
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text