CODEWITHSUNDEEP
javascripthtmlreactjs
infodev
infodev

Reputation: 5245

Delete space between components

I'm getting a white space between svg component and html title, I would like to delete it.

enter image description here

I'm trying to make demo working but I'm not getting it.

class App extends React.Component {
  constructor() {
    super();

  }
  
  render() {
  const myStyle= {
  fontFamily: "Lato",
  backgroundColor: "#0099ff",
  margin:0
}
    return (
      <div>
        <Wave />
        <p style={myStyle}>
          Start editing to see some magic happen :)
        </p>
      </div>
    );
  }
};

class Wave extends React.Component {
  constructor() {
    super();
  }
  render() {
    return (
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
      <path fill="#0099ff" fillOpacity="1" d="M0,32L48,69.3C96,107,192,181,288,181.3C384,181,480,107,576,112C672,117,768,203,864,208C960,213,1056,139,1152,101.3C1248,64,1344,64,1392,64L1440,64L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
    </svg>
    );
  }
}


ReactDOM.render(<App />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

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

Upvotes: 2

Views: 217

Answers (1)

hemantmetal
hemantmetal

Reputation: 107

It's because of SVG, so one solution is have marginTop:-5 on the 2nd component below the Wave

class App extends React.Component {
  constructor() {
    super();

  }
  render() {
  const myStyle= {
  fontFamily: "Lato",
  backgroundColor: "#0099ff",
  padding:0,
  marginTop:-5
}
    return (
      <div>
        <Wave />
        <p style={myStyle}>
          Start editing to see some magic happen :)
        </p>
      </div>
    );
  }
};

class Wave extends React.Component {
  constructor() {
    super();
  }
  render() {
    return (
    <div style={{border:'1px solid red'}}>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
      <path fill="#0099ff" fillOpacity="1" d="M0,32L48,69.3C96,107,192,181,288,181.3C384,181,480,107,576,112C672,117,768,203,864,208C960,213,1056,139,1152,101.3C1248,64,1344,64,1392,64L1440,64L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
    </svg>
    </div>
    );
  }
}


ReactDOM.render(<App />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Upvotes: 2

Related Questions