Menu
That solution, however, ignores why that space is being added. The inline-block display property treats block level elements (e.g. <div> ) as an inline element (e.g. <span> ), and, just like if you had a line break between two <span> elements, the line-break between the <div> s is creating a space between the <div> s.
We can use the padding-left property in a <span> element to add spaces. For example, inside the HTML body, type the text of your desire. Where you want to add the blank space, create a <span> element and apply the style in it. Set the padding-left property to 30px .
In my test, I have 2 spans both set to display:inline-block with a border for visibility. Firefox renders space between each span. Even setting margin:0;padding:0; doesn't do anything to fix this. My expectation when setting the inline span element to display:inline-block is that the 2 spans render flush against each other, as if you floated 2 divs left or right. The only "fix" I have found is to add float:left or right to the spans, but that defeats my original purpose of trying not to use floats at all. Any ideas?
<style> span{ border:2px solid #000; display:inline-block; padding:0; margin:0; } </style> <span>Test</span> <span>Test2</span> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With