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

Question

通常 span 不应该有任何 margin-top，那是什么原因呢？另外，出于某种原因，如果我将一个 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