12

If you add a tag to a word in a sentence, the padding on the class causes the line-height to differ from the rest of a paragraph. Perhaps the padding could be the same as an inline code block?

These are the current values:

.post-tag {padding: .4em .5em;}
.code { padding: 1px 5px; }

Example:

Aenean condimentum id magna et maximus. In eget suscipit sapien. Quisque cursus, lectus eget mollis eleifend, purus metus molestie sem, sit amet sodales magna magna sit amet nisi. Duis quam elit, sodales eu dictum nec, sodales sit amet ipsum. Aliquam in leo sit amet purus porta lobortis. Suspendisse at bibendum odio, sollicitudin maximus purus. vel dolor ultricies, sodales justo non, sodales nisl. In hac habitasse platea dictumst. Praesent eros enim, pretium sed pharetra in, scelerisque sit amet nibh. Etiam efficitur nisi massa, quis euismod neque tempus ac. Ut sit amet dolor dolor. Nam cursus sapien vitae leo dictum rutrum. Fusce laoreet ante id lobortis ultrices. Sed sed metus arcu. Pellentesque vestibulum ut velit eu feugiat. Praesent pulvinar porta mi quis vehicula.

1
  • 2
    I'm noticing now in meta that the background-color is the same so inline tags would be indistinguishable from inline code if the padding were the same. On Stack Overflow, and I assume most other sites, this would not be an issue.
    – user736893
    Commented Aug 31, 2016 at 20:57

3 Answers 3

0

This spacing problem is basically the same as Putting emoticons in paragraphs without affecting `line-height`

Tags without padding don't look right. Instead, I recommend negative margins, e.g.

.post-tag {
  margin: -1em 0;
}

enter image description here

The tags in consecutive lines may overlap, but doesn't look wrong to me:

enter image description here

1
  • I think this and the 'tag icon' solution would be ideal.
    – user736893
    Commented Jun 8, 2017 at 15:18
2

Some sponsored tags have an icon, which I like. What about a generic icon?

enter image description here

(Thanks to http://fontawesome.io/)

2

I hacked the CSS to see what the change might look like on Stack Overflow:

spacing

This is with padding of .15em. Note that tag logos don't show up in embedded tags by default.

That doesn't look very tag-like, so I also checked what it might look like with [brackets]:

spacing with brackets


On a side note, I think that most tag syntax is used on Meta, where the color of tags is confusingly similar to that of code:

oO


I'm not convinced that this change is worthwhile, since I think this will introduce too much inconsistency, or produce something confusingly similar.

You must log in to answer this question.