时间戳

首页 > 解决方案 > CSS内联边距问题

css - CSS内联边距问题

问题描述

希望是一个简单的。

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

我有一个内联的 span 元素。

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

这个跨度上有一个margin-left40px 显示

在此处输入图像描述

但是，如果我将视口缩小到足够小，它就会这样做

在此处输入图像描述

问题：所以在新行上它不会保留边距......

但是，如果我将其更改span为display:block它会这样做

在此处输入图像描述

这就是我想要的。

但是，我在https://www.impressivewebs.com/difference-block-inline-css/上阅读了有关内联元素的内容

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

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

谢谢

标签： css

解决方案

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

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

Please Login With Your Details和Below。

根据W3C 建议：

当一个内联框被分割时，边距、边框和填充在分割发生的地方（或在任何分割处，当有多个分割时）没有视觉效果。

他们提供了这个特定的示例来演示您遇到的情况：

<!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>

W3C 示例

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

推荐阅读