The Space component

Blog posted on March 15 2023

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.

Usage


<h1>Welcome to my internet corner!</h1>
<Space height={1} />
<p>This is where i share thoughts</p>

React component


// 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;

Svelte component


// 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 />

← home page