My favourite way of putting space between content is using a <Space />
component instead of adding a css class name and then a single css style
for margin-top
. Here are some examples below.
<h1>Welcome to my internet corner!</h1>
<Space height={1} />
<p>This is where i share thoughts</p>
// File name space.js
function Space(props) {
const { height = null, width = null } = props;
const style = {};
if (height) {
style.height = `${height}rem`;
}
if (width) {
style.width = `${width}rem`;
}
return <div className="space" style={style} />;
}
export default Space;
// File name Space.svelte
<script>
export let width = false;
export let height = false;
if (width) {
width = `${width}rem`;
}
if (height) {
height = `${height}rem`;
}
</script>
<div class="space" style:width style:height />