React JSX: How do I add white space between navigation links in my navbar

Question

Currently my website looks like below. I have three links in my navigation bar and I'm trying to have them be more spaced apart.

render() {
    return (
      <Router>
        <div>
          <nav>
            <Link to="/admin/dashboard">Upload Eyeball</Link>
            <span></span>
            <Link to="/admin/dashboard">Diagnostic Prediction</Link>
            <Link to="/admin/dashboard">Reject Prediction</Link>
          </nav>
          <h1>Diabetic Retinopathy Diagnosis</h1>
          {/* localhost */}
          <Route exact path="/" component={EyeballLoadComp} />
          <Route exact path="/diagnosis" component={EyeballDiagnosis} />
          <Route exact path="/update/:eyeballId" component={UpdateEyeball} />
        </div>
      </Router>
    );

I tried adding a span in there to give the links some space but it didn't work.

How do I fix this?

Did you try adding between the spans? Also https://stackoverflow.com/questions/18065062/bootstrap-css-space-between-buttons-in-navbar — shadowmaster, Sep 27 '19 at 21:32

score 4 · Answer 1 · answered Sep 27 '19 at 22:19

The clean way to do it is to create a CSS class on your CSS file:

.navBarLink {
  margin: 5px;
}

And then using that class on your links:

<nav>
    <Link className='navBarLink' to="/admin/dashboard">Upload Eyeball</Link>    
    <Link className='navBarLink' to="/admin/dashboard">Diagnostic Prediction</Link>
    <Link className='navBarLink' to="/admin/dashboard">Reject Prediction</Link>
</nav>

Why? Spacing and layout should be done in CSS and inline sytles (using the HTML tag 'style') are usually considered a bad practice.

Mike · Answer 2 · 2019-09-27T22:02:33.780

<nav>
   <Link to="/admin/dashboard">Upload Eyeball</Link>{' '}
   <Link to="/admin/dashboard">Diagnostic Prediction</Link>{' '}
   <Link to="/admin/dashboard">Reject Prediction</Link>{' '}
</nav>

{' '} will do it but its a hack, I would recommend to use CSS:

<nav>
   <Link to="/admin/dashboard" style{{marginRight: '5px'}}>Upload Eyeball</Link>
   <Link to="/admin/dashboard" style{{marginRight: '5px'}}>Diagnostic Prediction</Link>
   <Link to="/admin/dashboard">Reject Prediction</Link>
</nav>

or create a class 'navLink' and style link the way you want

<nav>
   <Link className='navLink' to="/admin/dashboard">Upload Eyeball</Link>
   <Link className='navLink' to="/admin/dashboard">Diagnostic Prediction</Link>
   <Link className='navLink' to="/admin/dashboard">Reject Prediction</Link>
</nav>

tic · Answer 3 · 2019-09-27T22:00:43.857

0

You can just pass a style or className prop

https://codesandbox.io/s/charming-saha-g196f

<Link to="/" style={{ marginRight: 10 }}>Home</Link>

edited Sep 27 '19 at 22:00

answered Sep 27 '19 at 21:53

tic

2,484
1
21
33

React JSX: How do I add white space between navigation links in my navbar

3 Answers3