Реактивный компонент, пространство под встроенным элементом

Question

В приведенном ниже примере у меня есть красный элемент, внутри которого находится бледно-зеленый элемент inline-block. Зеленый элемент имеет ширину 100%, и я ожидаю, что он полностью закроет красный элемент, красный не будет отображаться. Но, как вы можете видеть, он устанавливает 2-3 пикселя над дном своего контейнера. Я давно смотрю на это, но не вижу, в чем проблема. Я не вижу пробелов в браузере инспектора. Я в тупике, помощь оценена.

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>

    }
}

Answer 1

Если вы не помещаете никаких элементов в родительский div, кроме вложенного, просто добавьте атрибут lineHeight и установите его в ноль, а затем установите его в 1em в дочернем 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>

    }
}