Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

Display inline-block causes extra space at the bottom

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

Fiddle

Steps to reproduce the problem

Add slides with images 16by9
Add appropriate styles so that the image would take whole place (width: 100%, height: auto)
Inspect slide div and parent div for height
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)

Issue Analytics

State:
Created 5 years ago
Reactions:4
Comments:6

Top GitHub Comments

26reactions

klucznikcommented, Feb 20, 2019

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

5reactions

randellcommented, Oct 4, 2018

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

Top Results From Across the Web

Why display=inline-block adds uncontrollable vertical margins

When you make the .txt element inline-block , it is taken into the text flow of the parent .btn element. At that point,...

Block, Inline, and Inline-Block explained | CSS Tutorial

Understaning how block, inline, and inline - block each behave is very important when learning CSS, as well as knowing why you might...

When do you use inline-block? | CSS-Tricks

The block-direction margin on inline elements is ignored entirely; The padding on inline elements doesn't affect the height of the line of text....

Animating from "display: block" to "display: none"

You want to make an element gradually disappear visually from the page. · When the element is visible, first animate the opacity, then,...

HTML and CSS Tutorial - Nanyang Technological University

images/css3.png" alt="CSS Logo" height="64" width="64"></td> </tr> <tr> <td>3. ... HTML5 added many semantic block elements, which extends <div> to ...