← home page

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