Inline-block and its companions that do not rely on float or flex

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

Recently, I've been doing a lot of HTML coding for the first time in a few years, and now that browser support for CSS3 has progressed, it's become easier to create pages.
The development environment has changed as well, with SASS and LESS making it possible to organize it programmably, and compiling automated using gulp, grunt, and webpack.

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

Disadvantages of float

A long time ago, there was a time when it was common to set float: left to arrange lists horizontally.
However, if you line them up horizontally using floats, they will line up horizontally, but the height of the parent item will be 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 the margin-top to 10px for the div element immediately after it, but this doesn't work well and I can't take up the space.

There was a time, about 10 years ago, when people used to add various unnecessary tags or do something with CSS to avoid this problem.

There is also display:flex

The year is 2016. The W3C has also put a lot of thought into creating a property called display:flex in the latest specifications.
This is another convenient feature, as it is designed to be responsive, so if you change the number of items arranged horizontally depending on the screen size, it will automatically fit the width, so it is said that there is no need for bootstrap's GRID system. Masu.

However, there was an IE problem in 2016, and IE11 only supports it with limited functionality, and the property is invalid in browsers before IE10.

Therefore, it looks like it will be a while before we can use not only display:flex but also flex properties such as inline-flex.

What is inline-block?

This is where a property called inline-block comes into play.

This is a property that has been supported since IE8 and has existed since the CSS2 era, so I think there is no problem if you understand that it is obsolete.
So, this time I would like to use this and arrange them horizontally.

If we rewrite the previous example using inline-block, it will 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>

With just this, the height of the ul element, which was not visible earlier, is now set, and the pink background color is now displayed.

If you want to arrange two rows horizontally, delete the margin 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 set the width to 50% (half), the two won't line up...
To solve this problem, we will introduce CSS properties that can be used in conjunction with inline-block.

Companion to inline-block

In fact, there are some patterns that you don't need to use, so I'll show you an example.

<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>

* WordPress automatically inserts a line break code for each HTML tag, so please copy the sample HTML and try it in a different environment.

The cause was that the new line code, space, and tab behind the li element took up a slight width, making it impossible to fit it just at 50% width.
To avoid this,

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

There are two methods.

The first method is a problem with the way the HTML is written, so let's look at how to deal with the second method.

Set letter-spacing, a CSS property that controls character width, on the parent element.
Then revert the letter-spacing on the child elements.
The sample below adds 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>

Added "letter-spacing: -0.4em;" to the parent element and "letter-spacing: normal;" to the child element.

It's a complete mystery what the value -0.4em means, but any number smaller than -0.4em will give you the desired layout.

Another companion

I would like to introduce one more property that you should also set.

Earlier, the problem was not visible because the content was a one-line list, but if it were a list like the one below, the layout would be broken.

<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's hard to understand, but if the first list has multiple lines, the second list next to it is arranged below the first list, so I don't understand why it's above the second list. There will be space. Therefore, the background color of the ul element is displayed in pink.

Usually, there are many layouts that align the pages based on the top, so to adjust this, set vertical-align.
The sample after setting will be as shown below.

<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 you have a list with the top side neatly aligned.

Responsive support is supported by adjusting the width depending on the device width using @media.

Once you understand this concept, I think you won't have much trouble with the layout.
In the coding I did this time, I succeeded in standardizing the HTML using the technique described above, and it took less man-hours than I expected.

CSS is deep and interesting.

Also, I would like to sincerely apologize that the result was neither CSS3 nor HTML5.

That's it.