Отступы для ссылок

Question

Есть следующий HTML/CSS:

a {
  margin: 0 20px;
}

Some Words...
<a href="#">Text</a>
<a href="#">Text</a>
<a href="#">Text</a>
<a href="#">Text</a>
Some Words...

Вопрос - как убрать отступы между ссылками и словами Some Words...? т.е. чтобы первая ссылка была прижата к словам Some Words... и последняя ссылка тоже.

Должно быть так:

Конечно, можно сделать что то вроде такого:

a {
  margin: 0 20px;
}
.words_1 {
   display: inline-block;
   margin-right: -20px;
}
.words_2 {
   display: inline-block;
   margin-left: -20px;
}

<div class="words_1">Some Words...</div>
<a href="#">Text</a>
<a href="#">Text</a>
<a href="#">Text</a>
<a href="#">Text</a>
<div class="words_2">Some Words...</div>

Но это весьма грубое и некрасивое решение. Как еще можно выполнить поставленную задачу?

Answer 1

При такой разметке с отступами всё почти хорошо, но остаются пробелы:

a + a {
  margin-left: 20px;
}

Some Words...
<a href="#">Text</a>
<a href="#">Text</a>
<a href="#">Text</a>
<a href="#">Text</a>
Some Words...

которые можно убрать:

a + a {
  margin-left: 20px;
}

Some Words...<a href="#">Text</a><a href="#">Text</a><a href="#">Text</a><a href="#">Text</a>Some Words...

body {
  display: flex;
  flex-wrap: wrap;
}

a + a {
  margin-left: 20px;
}

Some Words...
<a href="#">Text</a>
<a href="#">Text</a>
<a href="#">Text</a>
<a href="#">Text</a>
Some Words...

БЛОГ НА HUSL

Отступы для ссылок

Ответы (1 шт):