BezMizinca

Как правильно задавать расстояние между однотипными блоками

Recommended Posts

Добрый день, буду благодарен за ответ или ссылку где есть ответ на следующий вопрос.

Как правильно(стандартный метод) расположить однотипные блоки, в случае если между ними должно быть расстояние, но крайние блоки прилегают к родительскому блоку. Расстояние между блоков не должно меняться. Как пример http://prntscr.com/n1p5ol . 

Методом проб и ошибок, нашел несколько способов, и считаю самым правильным из этих способов задать всем блокам margin-right, а у каждого последнего блока строки убрать margin-right. Но если последний блок перепрыгнит на следующую строчку, то два блока склеятся. 

Второй метод задавать последнему блоку строки отдельный класс без margin-right.

Буду благодарен за ответ или ссылку на статью. 

Share this post


Link to post
Share on other sites

1. Классический old-school: родителю - отрицательный марджин, внутренним - паддинг

2. Классический old-school №2: внутренние - display: inline-block, родителю text-align: justify

3. Использовать флекс-боксы и justify-content: space-between

4. Использовать css grids

Share this post


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

2. Классический old-school №2: внутренние - display: inline-block, родителю text-align: justify

А justify применится к последней строчке? 

 

Спасибо большое за ответ!

Share this post


Link to post
Share on other sites
4 hours ago, BezMizinca said:

А justify применится к последней строчке? 

Примениться, правда с помощью небольшого хака с псевдоэлементом 😉

Если интересно, можете попробовать нагуглить сами. Тут еще и обнулить пробел между такими блоками придется. 

Share this post


Link to post
Share on other sites
46 минут назад, sigma77 сказал:

Примениться, правда с помощью небольшого хака с псевдоэлементом 😉

Добавить list-child  :after блок с шириной 100%?🤨

49 минут назад, sigma77 сказал:

Тут еще и обнулить пробел между такими блоками придется.

Не сильно в терминологии понимаю "обнулить пробел". Правильно я понял, что весь текст унаследует "justify" и растянется на всю ширину блока, поэтому необходимо сделать пробелы обычными? Если ДА. То это можно сделать вложенным селектором? 

Это первое что пришло на ум,просто интересно правильно ли я мыслю!) 
А пока пойду искать истину на просторах интернета. 

Еще раз спасибо за помощь!🙇‍♂️

Share this post


Link to post
Share on other sites
18 hours ago, BezMizinca said:

Не сильно в терминологии понимаю "обнулить пробел". Правильно я понял, что весь текст унаследует "justify" и растянется на всю ширину блока, поэтому необходимо сделать пробелы обычными?

Нет, тут о другой особенности инлайновых элементов. Если размещать такие элементы на разных строках, браузер автоматически добавляет пробел между ними. https://codepen.io/fainz777/pen/xBMjRg

Тут подробнее: https://css-live.ru/articles/zagadochnye-otstupy-mezhdu-inlajn-blokami.html

 

 

 

 

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,330
    Total Members
    3,128
    Most Online
    TimofejUS
    Newest Member
    TimofejUS
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.