1

I want all of the div/anchors to be touching. I have tried m-0 mx-0 and space-x-0 on both the div and the anchor and it will not close the gap. I know there are other display types to use but this seems like it should smush (technical term) together.

<script src="https://cdn.tailwindcss.com"></script>

<nav>
  <div class="h-11 inline-block m-0 text-lg slate-50 bg-slate-500 hover:text-slate-50 hover:bg-slate-800">
    <a href="#" class="p-4">Feed</a>
  </div>
  <div class="h-11 inline-block m-0 text-lg slate-50 bg-slate-500 hover:text-slate-50 hover:bg-slate-800">
    <a href="#" class="p-4">Posts</a>
  </div>
  <div class="h-11 inline-block m-0 text-lg slate-50 bg-slate-500 hover:text-slate-50 hover:bg-slate-800">
    <a href="#" class="p-4">Create</a>
  </div>
  <div class="h-11 inline-block m-0 text-lg slate-50 bg-slate-500 hover:text-slate-50 hover:bg-slate-800">
    <a href="#" class="p-4">Profile</a>
  </div>
</nav>

enter image description here

isherwood
  • 58,414
  • 16
  • 114
  • 157
nerdlyist
  • 2,842
  • 2
  • 20
  • 32
  • https://css-tricks.com/fighting-the-space-between-inline-block-elements/ – ATP Jul 25 '23 at 18:00
  • This question has not been answered. The suggested answer uses css not the tailwind provided classes. It is also suggesting flexbox which while an option is not the only display that exists. – nerdlyist Jul 25 '23 at 18:07
  • The first answer _does_ use Tailwind classes, and flexbox is the right approach from what you've shown us. – isherwood Jul 25 '23 at 18:11
  • It's not a tailwind's problem, the problem is the spaces between the the tags. it won't be answered because it's a browser behavior. And every CSS rule can be a tailwind class, therefore all the examples in the css-tricks's article are possible in tailwind. – ATP Jul 25 '23 at 18:12
  • Essentially, the question is flawed because the proposed classes deal with margin and padding, and a quick glance at the document inspector shows that those aren't the issue. If you want non-flexbox solutions, look at the older answers in the linked duplicate. – isherwood Jul 25 '23 at 18:14
  • In my question I state I know flexbox is an option. I am not currently using it out of curiosity. The general joy of experimentation. JUST FOR THE SAKE OF LEARNING. Which is why I came to SO. But as per the usual the community here is quick to shut everything down. Wonder why CHAT-GPT is doing so well... anyway answer was pretty easy `-mx-1`. I did not realize the reset did not handle these behaviors. – nerdlyist Jul 25 '23 at 18:18
  • It's actually `-mr-1`, `mx` is shorthand for margin left + right, while margin left is not needed here, And it's written in the article, And it's not real solution, setting fixed error value can lead to problems, you can try adding `font-size: 40px;` or (`text-2xl` in tailwind) to the nav – ATP Jul 25 '23 at 18:49
  • @ATP what article? Using `-mr` adds a lot of oddity. `-mx` seems pretty consistent. I used your example of `text-2xl` and nothing breaks. Again you all are looking too far down the line. Sometimes people ask simple questions for simple understanding. Best case with this question I learned the reset in tailwinds does not manage these margins. That is all. I was not worried about hyper super scalable ui responsiveness. Just huh this seems odd wonder why. Sometime new people to the field do strange things. It is a process called learning. – nerdlyist Jul 25 '23 at 19:05
  • This article: https://css-tricks.com/fighting-the-space-between-inline-block-elements/ – ATP Jul 25 '23 at 19:07
  • @ATP for example the other day I built a bash script that makes netcat a webserver and named pipes to move data in a queue. Why? Because it was stupid fun. Not practical at all. It sucks you cannot send more then like 4 requests a second. But I learned how to craft HTTP text responses, a lot about nc and a little more about bash. I would never have asked a question here about it though. I would have been shunned. – nerdlyist Jul 25 '23 at 19:09
  • @ATP Correct, that article actually gave me this idea. If you think a negative margin is bad but ignore the solutions in that article that prettier would break then I would call that irony. – nerdlyist Jul 25 '23 at 19:12
  • It's not about code aesthetics, it's about working well. negative margin would give you the effect you want in a specific condition, but won't solve the root of the problem. (it may be good for personal project, but imagine doing it for a client) About asking here, I can say it happened to me a lot in the past when my question got rejected, but I can understand why, they where to hard to follow and not minimal, when I started minimalizing my questions I figured out the problem by my own most of the times. – ATP Jul 25 '23 at 19:22
  • The style of this forum is more professional and not friendly, it's both good and bad, sometimes you need a more friendly forum, like reddit, but here there is more focused Q&A. As an example, this question can be more focused, adding `tailwind-css` to the story made it more complex, and people who don't know tailwind-css will avoid answering. – ATP Jul 25 '23 at 19:23
  • So the answer could easily be you can achieve what you are looking for with negative margin but the draw back to that is x,y and z a much better solution would be flexbox or grid. That way anyone that comes here can see that. I would consider that professional and helpful to the community. – nerdlyist Jul 25 '23 at 20:49

1 Answers1

1

You can use flex and gap-0 for your nav.

<script src="https://cdn.tailwindcss.com"></script>

<nav class="flex">
  <div class="h-11 inline-block m-0 text-lg slate-50 bg-slate-500 hover:text-slate-50 hover:bg-slate-800">
    <a href="#" class="p-4">Feed</a>
  </div>
  <div class="h-11 inline-block m-0 text-lg slate-50 bg-slate-500 hover:text-slate-50 hover:bg-slate-800">
    <a href="#" class="p-4">Posts</a>
  </div>
  <div class="h-11 inline-block m-0 text-lg slate-50 bg-slate-500 hover:text-slate-50 hover:bg-slate-800">
    <a href="#" class="p-4">Create</a>
  </div>
  <div class="h-11 inline-block m-0 text-lg slate-50 bg-slate-500 hover:text-slate-50 hover:bg-slate-800">
    <a href="#" class="p-4">Profile</a>
  </div>
</nav>
isherwood
  • 58,414
  • 16
  • 114
  • 157
ama coder
  • 106
  • 6