Ser8191

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

Recommended Posts

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

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

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 by Ser8191

Share this post


Link to post
Share on other sites

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

*{
  margin: 0;
  padding: 0;
}

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

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

Edited by AlexZaw

Share this post


Link to post
Share on other sites

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

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

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

Edited by AlexZaw

Share this post


Link to post
Share on other sites
4 часа назад, AlexZaw сказал:

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


*{
  margin: 0;
  padding: 0;
}

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

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Member Statistics

    46,700
    Total Members
    3,128
    Most Online
    VovkaKrut
    Newest Member
    VovkaKrut
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.