Задать отступы между блоками <li>

[Ser8191]

Здравствуйте.

Подскажите как изменить расстояние между блоками

ul.stroka li {
display:inline-block;
border: 1px solid #000;
width:50px;
height:50px;
background: #00FF21;
}

В итоге я получаю расстояние по горизонтали между блоками 4px, а по вертикали 20px

Как мне и по вертикали и по горизонтали установить отступ 10px

https://jsfiddle.net/Ser8191/gs5fqxL5/5/

Edited July 20, 2017 by Ser8191

[AlexZaw]

добавьте обнуление маржинов и паддингов по умолчанию например так 

*{
  margin: 0;
  padding: 0;
}

или используйте файл сброса стилей, например reset.css.

после чего устанавливайте необходимые отступы

[Ser8191]

Так мне наоборот нужно сделать отступы в 10 Px

[AlexZaw]

у элементов html есть свои паддинги и маржины по умолчанию, когда вы задаете свои размеры они добавляются к тем что есть по умолчанию, чтобы этого не происходило и делают сброс стилей

[Ser8191]

Спасибо, это я прекрасно знаю, суть вопроса иная.

[AlexZaw]

не у body обнуляем, а у всех элементов, ну или в данном конкретном случае у ul,затем в 

ul.stroka li {
display:inline-block;
border: 1px solid #000;
width:50px;
height:50px;
background: #00FF21;
}

добавляем margin:5px

Edited July 20, 2017 by AlexZaw

[Ser8191]

https://jsfiddle.net/Ser8191/gs5fqxL5/6/

Расстояние не 5 px как указано, а 14

[Ser8191]

Мне нужно сделать матрицу из квадратов 8*8

https://jsfiddle.net/Ser8191/gs5fqxL5/10/

Возможно есть вариант лучший чем использовать список

[AlexZaw]

слева и справа расстояние больше из-за отступов между инлайн блоками, между списками не пойму почему расстояние больше, почему то контент больше места занимает. удалось победить только с помощью line-height:0

варианты: таблица, flexbox

https://jsfiddle.net/AlexZaw/25xy9t0p/

Edited July 20, 2017 by AlexZaw

[DivMan]

4 часа назад, AlexZaw сказал:

добавьте обнуление маржинов и паддингов по умолчанию например так 

*{
  margin: 0;
  padding: 0;
}

или используйте файл сброса стилей, например reset.css.

после чего устанавливайте необходимые отступы

Обнулять для всех элементов, это плохой тон. 

[AlexZaw]

Ну я указал что лучше использовать файл для сброса стилей, хотя, на мой взгляд, все равно в них делают тоже самое только перечисляют элементы, а не применяют универсальный селектор, что плохого в обнулении отступов у тех элементов у которых их нет? Раз нет, значит ничего не обнулится

[Ser8191]

Здравствуйте. 

Почему нет отступов снизу от каждого квадрата?

https://jsfiddle.net/gs5fqxL5/57/

[vladmih]

Для ul нужно фонтсайз поставить в 0, т.к. это инлайн блоки и горизонтальные отступы из-за пробелов.
После этого блоки слипнутся, ставите нужный вам маржин, но учтите, что вертикальные маржины схлопнуться, а горизонтальные суммируются.

[Колхозник деревенский]

Советую Вам еще тут глянуть про отступы http://css-live.ru/articles/zagadochnye-otstupy-mezhdu-inlajn-blokami.html

[Ser8191]

Спасибо)

[Ser8191]

А как в display: inline-table; прижать текст по вертикали к низу?

Пример

https://jsfiddle.net/gs5fqxL5/59/