React component, space below in-line element

Question

I have, in the example below, I have a red element inside of which is a pale green inline-block element. The green element is 100% in width and I'd expect it to fully cover the red element, no red showing. But as you can see, it sets 2-3 pixels above the bottom of its container. I've been staring at it for a while but I can't see what the problem is. I can see no whitespace in the browser inspector. I'm stumped, help appreciated.

class DaisyTest extends React.Component {

    constructor(props) {
        super( props )
    }

    render() {

        return      <div style={{ width: '300px', backgroundColor: '#f00' }}>
                        <div style={{ width: '100%', height: '200px', display: 'inline-block', backgroundColor: '#efe', }}></div>
                    </div>

    }
}

very annoying indeed, see also [There is a 4px gap below canvas/video/audio elements in HTML5](https://stackoverflow.com/q/8600393/1176601) - solution is to use `display: block` or flex or whatever, but I couldn't find an explanation WHY it happens yet — Aprillion, Mar 28 '20 at 13:37
https://css-tricks.com/fighting-the-space-between-inline-block-elements/ suggests that the reason for the space is space from source code (between parent `
` and child `
` there are newlines an indentation in the code, which is rendered in HTML as single space by default, which creates a non-zero line height) — Aprillion, Mar 28 '20 at 13:40
Normally, yes, that's what I'd look for but I checked in the browser inspector and it shows no white space. I also tried putting the elements together on a single line, no indents, no space. It still does it. — Kim Aldis, Mar 28 '20 at 13:51
ah, well, that seems to suggest that the inline-block element itself is perceived similar to a character of text, which triggers a display of non-zero `line-height` (perhaps similar to the space below letter `a` which is needed for characters like `p`) — Aprillion, Mar 28 '20 at 13:55

score 0 · Answer 1 · answered Mar 28 '20 at 13:45

If you don't put any elements to parent div except the nested one, just add attribute lineHeight and set it to zero, then set it to 1em in child div

class DaisyTest extends React.Component {

    constructor(props) {
        super( props )
    }

    render() {

        return      <div style={{ width: '300px', backgroundColor: '#f00', lineHeight: '0' }}>
                        <div style={{ width: '100%', height: '200px', display: 'inline-block', backgroundColor: '#efe', lineHeight: '1em' }}></div>
                    </div>

    }
}

React component, space below in-line element

1 Answers1