WebDev Bites: Spacer Component Demo

horizontal and vertical spacer elements

SpacerComponent

Components <v-s> and <h-s> are user-defined HTML elements that insert vertical and horizontal space where they are declared in the page flow. Their size measure can be supplied either as included content or with an attribute, as illustrated below. Their colors can be styled with inline or inherited declarations. Their purpose is to provide a meaningful and slightly abreviated sytax for their alternatives: <div style="width: 20rem></div> 0.75rem
<h-s style="height:100%; background-color: orange;">15rem</h-s> 15rem <h-s size="10rem;"></h-s> <v-s>80px</v-s> 80px <v-s size="60px;" style="background-color: orange;"></v-s>
10rem