html - 为什么 Grommet 库中的 Text 组件渲染的 span 元素能够得到 margin-top？

Question

通常跨度不应该得到任何边距顶部，那么给出了什么？另外，由于某种原因，如果我将 Text 实例放在表单元素中，那么它不再像通常那样获得 margin-top 吗？

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>设置为display: flex，这就是为什么<Text>即使默认情况下它是内联的，您也可以设置边距。如果您要删除<SandboxComponent>组件并仅输出<Text>，它将只是内联元素。

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

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

试试这个：https ://codesandbox.io/s/grommet-sandbox-n8mww