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

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

Recently, I've been working on HTML coding for the first time in several years, and with the advancements in browser support for CSS3, it's become easier to create pages.
The development environment has also changed, with programs being put together using SASS and LESS, and compilation being automated using 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

In the past, it was common to set float: left to align lists horizontally.
However, when you align items horizontally with float, 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

The year is 2016. The W3C has racked their brains and in their latest specification they have defined a property called display:flex.
This is another handy feature, designed for responsiveness. If you change the number of elements arranged horizontally depending on the screen size, the width will automatically adjust to fit, which is said to eliminate the need for Bootstrap's grid system.

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 think of it as outdated.
So, this time I'll use this to align the elements horizontally.

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 set the width to 50% (half), the two still won't line up...
To solve this, I'll introduce the following CSS property to use 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 reason is that the line break code, spaces, and tabs after the li element take up a small amount of width, making it impossible to fit the text exactly 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 child element resets letter-spacing to its original value.
The sample below shows 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

Usually, most layouts are aligned based on the top, so to adjust this, we set vertical-align.
The sample after setting is as follows.

<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 much trouble with the layout.
In the coding I did this time, I was able to standardize the HTML using the techniques mentioned above, and it took less time than 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