Using Pug and it's creating whitespace between elements

HTML-CSS
1

See how nav and column aren’t touching? I know it’s because of a white space, but how do I remove it? Or am I off base here.

Your assistance is greatly appreciated.
CodePen URL: https://codepen.io/misterhtmlcss/pen/mxZYVJ?editors=1100

2

This article might be helpful:

1 Like
3

Thank you for the suggestion, but it’s not that I don’t know it’s white space, but how to actually fix it when I’m using PUG and I have no control over that kind of result. Seems to me there is a way or Jade/Pug wouldn’t exist.

Still a great suggestion, just not useful in this particular usecase.

Cheers

4

This worked for me:

.column {
	margin-left: -5px;
}
1 Like
5

I think floats or flexbox are better suited for this setup than inline elements. Then you wouldn’t have to hack inline elements.

6

That wasn’t the question.

7

Thank you Implaier. I appreciate your input, but what I want to do is understand HOW to avoid the problem while using PUG. Since the problem is inherent in using PUG since I’m unable to actually delete the white space, then surely someone must have a PUG solution/answer. That was what I was angling for, but I do appreciate that you have a fix. Ultimately the failure to communicate that nuance to you was mine and so I wanted you to know I did still appreciate your effort on the topic.

8

So? There’s no need to be sarcastic. I was just trying to help, and if you were using a better approach, you wouldn’t have the problem to begin with.

I don’t see why you don’t consider the negative margin or zero font an answer?

Anyway, if you want a way to do it in pug WITHOUT using floats or flexbox or negative margins or a zero font…

See this issue: fighting inline-block spacing through comments · Issue #1574 · pugjs/pug · GitHub

10

You turn off pretty mode when rendering Pug to HTML. What this means is that in CpdePen, where you are not in control of that, it isn’t possible. It is an edge case, but I understand why it’s a bit frustrating. Your only option in CodePen is to use one the aforementioned methods, you can’t force this - normally you would have control over how Pug was configured, but not in this case.

1 Like
11

Issac I get it and while I appreciate your desire to not have a sarcastic response I also (very very) much don’t appreciate when people tell me to use totally unrelated solutions to the question UNLESS that’s what I’ve actually asked for and it’s absolute annoying as f$ck when people blatantly ignore the question and throw down unrequested irrelevant solutions because they want to appear helpful or be useful somehow.

  • Do you know why I am using that technique?
  • Do you know why I’ve made the decisions that I’m making?

NO you don’t. In fact your throwing out unrequested comments like flexbox et al can absolutely be interpreted as acting superior, arrogant, dismissive and/or belittling to the reader/questioner. That being said that’s not what I read, but it’s not an unreasonable interpretation.

Further, please consider that when you don’t answer or comment directly on point you can often destroy the questioners query since others may join you in debating and dissecting the validity of your response thereby further destroying the utility of my asking the question due to the declining likelihood of my actually getting an answer. Which I’m sure you’ve experienced; we’ve all had that happen and it’s not appreciated.

All that being said, I was having a rough day and I probably should have held my tongue and not been a dick about it. Sometimes as we all know when we are short on patience and feel any sense of righteousness over someone else, well it usually goes in a regrettable direction as happened with my previous response. That being said don’t be too quick to dismiss my feedback; you may find it annoying to hear, but it doesn’t make it invalid.

12

@DanCouper thank you for actually answering my question; I’m eternally grateful for your response. It butt-ended a whole slew of possible future issues too as I think about the consequences of what you just said.

Have a great week!

13

Hi @Implaier
Due to what Dan said, I now will need your solutions when I’m using CodePen. So as it turns out you handled exactly the next thoughts I would have had and while I’ll admit I knew of one of those solutions I didn’t know of the others nor where to find them, so I really appreciate your links.

Have a great weekend!

1 Like
14

I don’t post because I want to appear helpful or be useful somehow. If I didn’t think my comment was useful and relevant, I wouldn’t have stated it.

Fine, you may have a perfectly good reason to be doing that. However, I am not alone in my opinion. If you read the CSS-Tricks article linked above, you would see they mentioned the exact same thing at the end.

Do you have a problem with someone stating an opinion? Is it somehow wrong when someone asks a question to say that there might be a better approach than what you are currently doing? I find it very arrogant and dismissive when someone gets so upset over a suggestion that there could possibly an easier approach.

I don’t find it annoying. Thanks for stating your reasoning, and I’ll try to think about that next time I make a suggestion that isn’t exactly what the question asked for. That said, this is a public forum, and I think you could be a little more open to other’s views, opinions, and suggestions without demanding that they fit your EXACT criterion.

Anyway, enjoy your weekend.

1 Like