为什么 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

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

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

html

css

reactjs

grommet