# Ocelot.Social Documentation

Skip to main content

- Introduction
- Neo4J

- Backend

  - GraphQL
  - neo4j-graphql-js

- Webapp (Frontend)

  - Components
  - HTML
  - SCSS
  - Vue

- Testing Guide

  - End-to-end Tests
  - Webapp (Frontend) Tests
  - Backend Tests
- Deployment
- Contributing
- Feature Specification
- Code of Conduct
- Documentation
- License

#

April 5, 2026
Less than 1 minute

On This Page

- Default margins
- Custom margins
- Responsive Breakpoints

## Default margins

By default the top margin is 0 and the bottom margin is `large`.

    <ds-space>
      <ds-placeholder>I have my own space</ds-placeholder>
    </ds-space>
    <ds-space>
      <ds-placeholder>I have my own space</ds-placeholder>
    </ds-space>

## Custom margins

Margins can be `xxx-small, xx-small, x-small, small, base, large, x-large, xx-large and xxx-large`

    <ds-space margin-bottom="xxx-small">
      <ds-placeholder>I have my own space (xxx-small)</ds-placeholder>
    </ds-space>
    <ds-space margin-bottom="xx-small">
      <ds-placeholder>I have my own space (xx-small)</ds-placeholder>
    </ds-space>
    <ds-space margin-bottom="small">
      <ds-placeholder>I have my own space (small)</ds-placeholder>
    </ds-space>
    <ds-space margin-bottom="base">
      <ds-placeholder>I have my own space (base)</ds-placeholder>
    </ds-space>
    <ds-space margin-bottom="large">
      <ds-placeholder>I have my own space (large)</ds-placeholder>
    </ds-space>
    <ds-space margin-bottom="xx-large">
      <ds-placeholder>I have my own space (xx-large)</ds-placeholder>
    </ds-space>
    <ds-space>
      <ds-placeholder>I have my own space</ds-placeholder>
    </ds-space>

## Responsive Breakpoints

Sometimes we need to adjust the layout for different screen sizes. Therefore margin can be set as an object of breakpoints `base, xs, sm, md, lg, xl`

    <ds-space :margin-bottom="{ base: 'small', md: 'base', lg: 'large' }">
      <ds-placeholder>I have my own space</ds-placeholder>
    </ds-space>
    <ds-space>
      <ds-placeholder>I have my own space</ds-placeholder>
    </ds-space>