1

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

Aiyaz N.
  • 31
  • 5
  • It's rendered out as `` but has css property of `display: block`, thats why you can apply margin top to the `` component. – Janiis Jul 29 '19 at 18:03
  • No, it doesn't seem to have a display property. Even if you add 'display: inline' in there, it still gets the margin-top. – Aiyaz N. Jul 30 '19 at 17:42

1 Answers1

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

Janiis
  • 1,478
  • 1
  • 13
  • 19
  • Thanks. I didn't know a flex box's children can get margin-top even if that child is a span element. – Aiyaz N. Aug 01 '19 at 20:50