how to give margin to a functional component in react.js?

Question

here is my code that is returned by functional component:

return (

    <div className="card border-0 shadow " >
      <div className="card-header">Update a Book</div>
      <div className="card-body">
        <form onSubmit={(e) => onUpdateContact(e)}>
          <div className="form-group">
        
            <TextField
            id="outlined-helperText"
            label="Enter The Name"
            defaultValue={n}
            onChange={(e) => setName(e.target.value)}
            variant="outlined"
            
          />
          </div>
          <div className="form-group">
           
            <TextField
            id="outlined-helperText"
            label="Enter The Isbn"
            defaultValue={isb}
            onChange={(e) => setIsbn(e.target.value)}
            variant="outlined"
            
          />
          </div>
      
         
          <button className="btn btn-warning" type="submit">
            Update Book
          </button>
        </form>
      </div>
    </div>

  );

i want to give left right margin to it....how to do it? when i type margin as attribute in <div className="card border-0 shadow " > ,it gives error

error:

<div className="card border-0 shadow " margin=20px >

Answer 1

You can use style attribute:

<div className="card border-0 shadow" style={{margin: 20}} >

Or you can add the margin via CSS:

.card {
   margin: 20px;
}

Answer 2

Here is what you need

 <div style={{margin: '0 20px'}}>...Your content </div>