Inline block adds extra height to the slide and breaks the visual

[gultyayev]

Display inline-block causes extra space at the bottom

====================================================================

Fiddle

Steps to reproduce the problem

1. Add slides with images 16by9
2. Add appropriate styles so that the image would take whole place (width: 100%, height: auto)
3. Inspect slide div and parent div for height
4. See the difference in height

====================================================================

What is the expected behaviour?

There should not be any extra space at the bottom. The problem is caused by adding to slides display: inline-block I see no reason for doing that. Specifying display: block solves the problem. Anyway, we do have wrappers around the user's slides so we don't loose anything.

====================================================================

What is observed behaviour?

Out of the slide div we can observe extra space at the bottom (caused by inline-block and font-size and is a known behaviour of inline-block)

[panec]

This is not an issue with the slider. All in line-block elements do it. There are many ways to overcome it. The simplest one is to change font-size to '0' on the element and then add a required font size on any text sub elements.

[gultyayev]

It is, because the slider's JS adds this inline-block with no reason to do that.

[randell]

Why does that inline-block style exist in the first place anyway?

[rmaschak]

Interestingly, I only observe this when using slick.js instead of the minified version slick.min.js.

*v1.8.1

[klucznik]

setting rows option to 0 fixes this behavior of adding inline block

[avtarnanrey]

add rows: 0 in options to stop the grid mode. We can close this issue now.

[lobotomoe]

App crashing while rows={0} in react slick. So I using this override as workaround.

.my-slider-class {
    .slick-slide {
      font-size: 0;
    }
}