Span padding not respected when there is no sibling, but remains when there is a sibling

Question

I have a div with a span and button inside of it. I can toggle the button to hide or show it.

When I do toggle the button, it makes the span jump around, as seen below:

const {
  Button,
} = window['material-ui'];

class ButtonContainer extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        hide: false
      }
    }
    handleHide() {
      this.setState(previous => ({
        hide: !previous.hide
      }))
    }
    render() {
        return ( 
            <div style={{"minHeight":"1000px", "padding":"0.05px", "display":"inline-block"}}>
                <Button style={{"background":"lightblue", "padding":"10px"}} onClick = {this.handleHide.bind(this)}>{this.state.hide?'show':'hide'} button</Button>
                <div>
                    <span style={{"background":"red", "padding":"10px"}}> jump </span>
                    {!this.state.hide && <Button style={{"background":"orange"}}> padding </Button>}
               </div>
            </div>)
    }
}


ReactDOM.render(<ButtonContainer/>, document.querySelector("#root"))

<script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/@material-ui/core/umd/material-ui.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/babel-standalone@latest/babel.min.js" crossorigin="anonymous"></script>

<div id="root"></div>

I've tried a lot of different things, some of which are from here, including adding display: inline-block to the parent as well as padding: 0.05px and it doesn't seem to have the desired effect.

How do I prevnt this jumping when the button is toggled?

score 3 · Accepted Answer · answered Apr 05 '19 at 09:45

As span is an inline element, it doesnt has its own width and height. To stop this behaviour you can add display: inline-block to your span. It will work.

const {
  Button,
} = window['material-ui'];

class ButtonContainer extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        hide: false
      }
    }
    handleHide() {
      this.setState(previous => ({
        hide: !previous.hide
      }))
    }
    render() {
        return ( 
            <div style={{"minHeight":"1000px", "padding":"0.05px", "display":"inline-block"}}>
                <Button style={{"background":"lightblue", "padding":"10px"}} onClick = {this.handleHide.bind(this)}>{this.state.hide?'show':'hide'} button</Button>
                <div>
                    <span style={{"background":"red", "padding":"10px", "display":"inline-block"}}> jump </span>
                    {!this.state.hide && <Button style={{"background":"orange"}}> padding </Button>}
               </div>
            </div>)
    }
}


ReactDOM.render(<ButtonContainer/>, document.querySelector("#root"))

<script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/@material-ui/core/umd/material-ui.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/babel-standalone@latest/babel.min.js" crossorigin="anonymous"></script>

<div id="root"></div>

`span` has to have `inline-block` or `block` thus supports to Padding/Margin style properties. — Sumeet Gohil, Apr 05 '19 at 09:48
So the answer [here](https://stackoverflow.com/a/19719427/1075247) "Other properties that, once applied to the **parent**, can help fix this behaviour are: `display: inline-block`" should say child? I find that quite an oversight! Thanks again — AncientSwordRage, Apr 05 '19 at 09:49
@Pureferret there can be n number of solution, but I just told the one I find more appropriate in your case :) — Techie_T, Apr 05 '19 at 10:03
@Techie_T no your answer is fine, the linked answer says 'parent' but your solution is on the 'child'. I'm wondering why they wrote that, when your solution clearly works? — AncientSwordRage, Apr 05 '19 at 10:08
@Pureferret and in that link they are talking about the margin -collapsing between the elements. but in your case the issue exists because your child element is `span` which can not have its own height. Go through this link. It will give you more clarity. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing — Techie_T, Apr 05 '19 at 10:16

Span padding not respected when there is no sibling, but remains when there is a sibling

1 Answers1