Question

希望是一个简单的。

我在我的项目中主要集中在CSS方面，但是我遇到了块与内联元素的问题，我不想继续前进，因为我知道它是学习CSS的基础。所以误会......

我有一个内联的span元素。

<span>Please Login With Your Details Below</span>

此范围内有margin-left 40px显示

但是，如果我将视口缩小得足够小，就可以执行此操作

问题：所以在新行上它没有保留保证金......

但是，如果我将span更改为display:block，则会执行此操作

这就是我想要的。

但是我在https://www.impressivewebs.com/difference-block-inline-css/上看到了有关内联元素

的内容

将忽略顶部和底部边距设置，但将向左和向下应用右边距和任何填充

所以可能是我完全误读了它，但据我所知它应该应用左边距。有人可以解释为什么没有吗？

由于

Answer 1

当用户代理确定内联内容不适合包含块时，它会将内联内容拆分为多个内联框，以适应正确显示所需的包装而不会溢出包含块（如果可能）。

因此，在您的示例中，Please Login With Your Details Below会在缩小视口时溢出包含元素，因此会分成两个内联框：

Please Login With Your Details和Below。

根据W3C recommendation：

当拆分内联框时，边距，边框和填充在发生拆分时没有视觉效果（或者在任何拆分时，有多个时）。

他们提供了这个具体的例子，展示了你遇到的情况：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
  <HEAD>
    <TITLE>Example of inline flow on several lines</TITLE>
    <STYLE type="text/css">
      EM {
        padding: 2px; 
        margin: 1em;
        border-width: medium;
        border-style: dashed;
        line-height: 2.4em;
      }
    </STYLE>
  </HEAD>
  <BODY>
    <P>Several <EM>emphasized words</EM> appear here.</P>
  </BODY>
</HTML>

在“强调”之前和之后插入边距。
在“强调”之前，之上和之下以及“单词”之后，之上和之下插入填充。在每种情况下，三边都有虚线边框。

Answer 2

您描述的行为完全正确无误。但是，左右边距应用于内联元素的信息是正确的。

您没有的信息是，实际内联元素左边距仅缩进第一行。

将其视为一个单独行的元素，此行可以具有水平边距。将文本分成多行是一个很好的功能。但从保证金属性的角度来看，它仍然是一条线。

Answer 3

您可以使用此属性

text-align: justify;
text-align-last: justify;

CSS内联保证金问题

3 个答案: