As you can see there is a blank space between each DIV on 1st row.
Why is that?
It is because each DIV is on a new line. But so what?
This you can see proven by the 2nd row of same DIVs.
This little quirk is example of CSS quircks and bizzare behavior that really bothers me,
And was wondering what you all think about this?
And more specifically is there a way to force the DIVs in 1st row not have any spacing between them? Even setting margin: 0px does not do this!
Because inline or inline-block elements normally have a “word space” between them when arranged on one line like words in a sentence. Your divs are set to {inline-block} instead of their default which is {block}.
The most basic method is the one that you demonstrated in the second row that eliminates the white space between the inline-block elements.
One can {float:left} the elements in the first row; Flexbox and a CSS table/table-cells would do the trick; and more. As often repeated… the best method to use depends on your layout,
Personally, I truly believe in keeping things simple. For example, why give an ordinary HTML page a pointless .php suffix? And always validate your code, even the simple “test” or “demonstration” code. It helps you improve your proficiency and understanding of HTML and CSS. And Avoid ID’s… they can’t be duplicated on a page; use classNames instead… classNames would have been sensible here.
Annoying, maybe, but well-understood; not bizarre.
inline-block creates those gaps for a reason, and there are many creativesolutions for removing them, but these days this is just a sign that inline-block is not the right tool here. Options like display: flex are much more appropriate.
Yes, but if you change the default display type of the div, you cannot then expect it to retain its default behaviour.
To make an element display as inline or inline-block you are telling it to behave and flow on a line in the same way as characters of text.
It is. Whitepace, be it an actual space or a carriage return will create a space between the elements. This is normal, known behaviour of inline display types.
An example of this in action is when writing a paragraph in html. I will generally make a new line (in the html source codet) for each sentence, just to keep line lengths sensible for readability. I don’t need to add a space at the end because the browser will display one because of the carriage return.
So ask yourself: does display: inline-block exhibit behaviour that is conducive to your intended layout?
CSS has a number of options to display elements side by side of which inline-block is just one.
In addition to the advice about validating html and avoiding IDs for selectors (and duplicate IDs) another thing that makes me cringe when I see it is:-
