Why is the span element rendered by the Text component from the Grommet library, able to get margin-top?

Question

Normally spans should not get any margin-top, so what gives? Also, for some reason, if I place a Text instance inside a form element, then it no longer gets the margin-top as it normally should be the case?

import React from 'react';
import { Text } from 'grommet';
import SandboxComponent from './SandboxComponent';

export default () => (
  <SandboxComponent>
    <Text margin={{top: '10px'}}>Ricky town, population... Ricky</Text>
  </SandboxComponent>
);

https://codesandbox.io/s/github/grommet/grommet-sandbox?initialpath=text&module=%2Fsrc%2FText.js

Answer 1

<SandboxComponent> is set to display: flex and that's why you can set margin on <Text> even if it's inline by default. If you would remove <SandboxComponent> component and output just <Text> it will be just inline element.

import React from 'react';
import { Text } from 'grommet';

export default () => (
  <Text margin={{top: '10px'}}>Ricky town, population... Ricky</Text>
);

Try this: https://codesandbox.io/s/grommet-sandbox-n8mww