Spans seem to be Blocking, even with inline block set

[simona6]

I've to a strange problem with some basic HTML and CSS.

I know you can put a <span> inside a <div> and it will show inline, such as using additional classes on inline text.  For some reason, ours seems to 'block' to the next line.

.grve-title > span {
    display: inline-block;
    white-space: nowrap;
}

With this set, our Spans are going to the next line, but only if the span is long.  So if you have a span that is longer than the container, it will wrap.  If it is one word, it won't.

Any ideas??  If I deselect the display part of this class in Inspection, it doesn't block at all, it just goes to default.

I don't however know how to disable this "display: inline-block"?!  

[requinix]

If it has the undesired behavior with inline-block and the desired behavior without inline-block then it sounds like you've found the source of your problem.

11 hours ago, simona6 said:

I don't however know how to disable this "display: inline-block"?!  

By editing the CSS?

If it's there now then that probably means something needs to use it. If so then you need to do something special for your span, but without knowing more about... well, everything, it would be really hard to give any sort of specific advice. Perhaps you shouldn't be using a span at all?

[maxxd]

A span's default display value in a browser is inline, so unless there's a reason to change it it should do what you want natively. As requinix pointed out, if it's there it may be used - try adding a helper class and overriding the display to 'inline' on that class.

[gizmola]

Literally the reason for the existence of a span, is that it's display: inline.  This respects the style of the parent element.  When you set it to inline-block, you are causing it to have "block-like" properties, where it will have margins and padding that effect the box model.  You should ask the question as to why the spans you are using have this class applied, and why someone set the style to be inline-block.