Inline-block and its companions, without relying on float or flex

Hello.
I'm Mandai, the Wild team member in charge of development.

Lately, I've been coding HTML non-stop for the first time in several years, and I've noticed that browser support for CSS3 has improved, making it much easier to create web pages.
The development environment has also changed; it can now be programmed using SASS or LESS, and compilation can be automated with gulp, grunt, and webpack.

Even if the development environment changes, the tips for creating a responsive website with CSS remain the same, so this time I will summarize the techniques for creating responsive horizontal items using inline-block

The disadvantages of float

A while ago, it was common practice to set `float: left` to arrange items horizontally in a list.
However, using `float` to arrange items horizontally has the drawback that while they are arranged horizontally, the height of the parent item becomes 0.

<style> .hoge-list1 { float: left; background-color: blue; color: white; margin-left: 10px; } </style><ul style="list-style: none; background-color: pink;"><li style="margin: 0;" class="hoge-list1"> hoge</li><li style="margin: 0;" class="hoge-list1"> hoge</li><li style="margin: 0;" class="hoge-list1"> hoge</li><li style="margin: 0;" class="hoge-list1"> hoge</li><li style="margin: 0;" class="hoge-list1"> hoge</li><li style="margin: 0;" class="hoge-list1"> hoge</li></ul>

I have set margin-top to 10px on the div element immediately after it, but this doesn't work properly and I can't get the space

About 10 years ago, in order to avoid this, people would add various unnecessary tags or try to do things with CSS

There is also display:flex

It's 2016. The W3C has put a lot of thought into it, and in the latest specifications, they have established a property called display:flex.
This is a very convenient one; it's designed with responsiveness in mind, so if you change the number of elements displayed horizontally depending on the screen size, it will automatically adjust the width to fit, and it's even said that Bootstrap's GRID system will become unnecessary.

However, there was an IE issue in 2016, and the property was only supported in a limited way in IE11, and was invalid in browsers prior to IE10

Therefore, it will probably be a while before we can make full use of flex properties such as inline-flex, not just display:flex

What is inline-block?

This is where the inline-block property comes in

This property has been supported since IE8 and has been around since the CSS2 era, so it's safe to say it's a mature and reliable property.
Therefore, we'll use this to arrange elements side by side.

If we rewrite the previous example using inline-block, it would look like this:

<style> .hoge-list2 { display: inline-block; background-color: blue; color: white; margin-left: 10px; } </style><div style="border: 1px solid #ddd; border-radius: 4px; width: calc(100% - 40px); margin-left: 20px; margin-right: 20px; height: 300px; background-color: #eee;"><ul style="list-style: none; background-color: pink;"><li style="margin: 0;" class="hoge-list2"> hoge</li><li style="margin: 0;" class="hoge-list2"> hoge</li><li style="margin: 0;" class="hoge-list2"> hoge</li><li style="margin: 0;" class="hoge-list2"> hoge</li><li style="margin: 0;" class="hoge-list2"> hoge</li><li style="margin: 0;" class="hoge-list2"> hoge</li></ul><div style="clear: both; margin-top: 10px;"> test</div></div>

Just by doing this, the height of the ul element, which was not visible before, is now set and the pink background color is now displayed

If you want two columns side by side, remove the margins and set the width to 50% to create the layout you want

<style> .hoge-list3 { display: inline-block; background-color: blue; color: white; margin: 0; padding: 0; width: 50%; } </style><div style="border: 1px solid #ddd; border-radius: 4px; width: calc(100% - 40px); margin-left: 20px; margin-right: 20px; height: 300px; background-color: #eee;"><ul style="list-style: none; background-color: pink; margin: 0; padding: 0;"><li style="margin: 0;" class="hoge-list3"> hoge</li><li style="margin: 0;" class="hoge-list3"> hoge</li><li style="margin: 0;" class="hoge-list3"> hoge</li><li style="margin: 0;" class="hoge-list3"> hoge</li><li style="margin: 0;" class="hoge-list3"> hoge</li><li style="margin: 0;" class="hoge-list3"> hoge</li></ul><div style="clear: both; margin-top: 10px;"> test</div></div>

Oh, even if I reduce the width to 50% (half), they still don't fit side-by-side...
To solve this, I'll now introduce a CSS property that can be used in conjunction with inline-block.

A companion to inline-block

In fact, there are some patterns that you don't need to use, so here are some examples

<style> .hoge-list4 { display: inline-block; background-color: blue; color: white; margin: 0; padding: 0; width: 50%; } </style><div style="border: 1px solid #ddd; border-radius: 4px; width: calc(100% - 40px); margin-left: 20px; margin-right: 20px; height: 300px; background-color: #eee;"><ul style="list-style: none; background-color: pink; margin: 0; padding: 0;"><li style="margin: 0;" class="hoge-list4"> hoge</li><li style="margin: 0;" class="hoge-list4"> hoge</li><li style="margin: 0;" class="hoge-list4"> hoge</li><li style="margin: 0;" class="hoge-list4"> hoge</li><li style="margin: 0;" class="hoge-list4"> hoge</li><li style="margin: 0;" class="hoge-list4"> hoge</li></ul><div style="clear: both; margin-top: 10px;"> test</div></div>

*In WordPress, line break codes are automatically inserted for each HTML tag, so please copy the sample HTML and try it in a different environment

The problem was that the newline characters, spaces, and tabs behind the `<li>` elements were taking up a small amount of space, preventing them from fitting perfectly at 50% width. To avoid this
,

• As in the previous code, remove the control characters immediately after the li element and any tabs or spaces used for HTML formatting
• The parent element of the li element (i.e., the ul) element temporarily eliminates the width that the characters can take

There are two ways to do this:

The first method is a problem with how the HTML is written, so we will look at how to deal with the second method

The CSS property `letter-spacing`, which controls character width, is set on the parent element.
Then, the `letter-spacing` property is reset on the child element.
The sample below demonstrates this behavior.

<style> .hoge-list5 { display: inline-block; background-color: blue; color: white; margin: 0; padding: 0; width: 50%; letter-spacing: normal; } </style><div style="border: 1px solid #ddd; border-radius: 4px; width: calc(100% - 40px); margin-left: 20px; margin-right: 20px; height: 300px; background-color: #eee;"><ul style="list-style: none; background-color: pink; margin: 0; padding: 0; letter-spacing: -0.4em;"><li style="margin: 0;" class="hoge-list5"> hoge</li><li style="margin: 0;" class="hoge-list5"> hoge</li><li style="margin: 0;" class="hoge-list5"> hoge</li><li style="margin: 0;" class="hoge-list5"> hoge</li><li style="margin: 0;" class="hoge-list5"> hoge</li><li style="margin: 0;" class="hoge-list5"> hoge</li></ul><div style="clear: both; margin-top: 10px;"> test</div></div>

I added "letter-spacing: -0.4em;" to the parent element and "letter-spacing: normal;" to the child element

It's a mystery what the -0.4em value means, but anything less than -0.4em will give you the layout you want

Another companion

There is one more property that you should also set, so I'll introduce it here

Earlier, the content was a single-line list, so no problem was visible, but if it were a list like the one below, the layout would be disrupted

<style> .hoge-list6 { display: inline-block; background-color: blue; color: white; margin: 0; padding: 0; width: 50%; letter-spacing: normal; } </style><div style="border: 1px solid #ddd; border-radius: 4px; width: calc(100% - 40px); margin-left: 20px; margin-right: 20px; height: 300px; background-color: #eee;"><ul style="list-style: none; background-color: pink; margin: 0; padding: 0; letter-spacing: -0.4em;"><li style="margin: 0;" class="hoge-list6"> hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge</li><li style="margin: 0;" class="hoge-list6"> hoge</li><li style="margin: 0;" class="hoge-list6"> hoge</li><li style="margin: 0;" class="hoge-list6"> hoge</li><li style="margin: 0;" class="hoge-list6"> hoge</li><li style="margin: 0;" class="hoge-list6"> hoge</li></ul><div style="clear: both; margin-top: 10px;"> test</div></div>

It may be difficult to see, but when the first list is multi-line, the second list next to it is aligned based on the bottom of the first list, so there is an unclear space above the second list. This is where the pink background color of the ul element is displayed

Typically, layouts are aligned from the top, so we'll adjust this by setting `vertical-align`.
The following sample shows the result after setting this.

<style> .hoge-list7 { display: inline-block; background-color: blue; color: white; margin: 0; padding: 0; width: 50%; letter-spacing: normal; vertical-align: top; } </style><div style="border: 1px solid #ddd; border-radius: 4px; width: calc(100% - 40px); margin-left: 20px; margin-right: 20px; height: 300px; background-color: #eee;"><ul style="list-style: none; background-color: pink; margin: 0; padding: 0; letter-spacing: -0.4em;"><li style="margin: 0;" class="hoge-list7"> hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge</li><li style="margin: 0;" class="hoge-list7"> hoge</li><li style="margin: 0;" class="hoge-list7"> hoge</li><li style="margin: 0;" class="hoge-list7"> hoge</li><li style="margin: 0;" class="hoge-list7"> hoge</li><li style="margin: 0;" class="hoge-list7"> hoge</li></ul><div style="clear: both; margin-top: 10px;"> test</div></div>

Now we have a list with a neatly aligned top surface

Responsive support is provided by @media, which adjusts the width depending on the device width

If you understand these concepts, you shouldn't have too many problems with layout.
In the coding I did this time, I succeeded in standardizing the HTML using the techniques mentioned above, and it didn't take as much effort as I expected.

CSS is deep and interesting

We would also like to sincerely apologize for the fact that the final version was neither CSS3 nor HTML5

That's all