<div className="card border-0 shadow " style={{margin: '0 500px' }}>
The above code describes how to add margins to a component ,but why can't it be written like this:
<div className="card border-0 shadow " style={{top-margin: '500px';left-margin : '200px' }}>
Your style syntax is wrong, replace ; with , to make it a valid object. Also object keys should be in camelCase.
Example:
style={{ marginTop: '500px', marginLeft: '200px' }}
Because you're writing in JSX syntax which means you need to pass an object to the style attribute/prop. These object keys need to be in camelCase notation. You can use CSS classes and add them in the className name attribute as well or just use styled-components.
camelCase - kebab-case isn't syntatically valid in JS, so that's out, but they could be e.g. snake_case. They just have to be valid identifiers. Alternatively they can be quoted, "kebab-case" would be fine.you have to write it like this
<div className="card border-0 shadow " style={{marginTo: '500px';left-margin : '200px' }}>
