为什么我添加大纲的时候 <p> 这么长？

Question

我正在做一个网站，有些事情很烦人...这是代码：

.log {
      color: #FF00FC;
      font-family: Josefin Regular;
      font-size: 12.8pt;
      outline: 3.2px solid #ff00fc;
      padding: 6px;
      position: relative;
      top: 400px;
      left: 10px;
      transform: rotate(10deg);
      z-index: 0;
}

<p class='log'>>_</p>

由于某些原因，这个 <p> 太长了，它占用的空间比屏幕还多。我怎样才能使 outline: 更小以符合我的喜好？我希望它不那么宽。谢谢，希望你明白。

Answer 1

p 元素默认有一个 display: block;，它将占用流中允许的宽度。通过将 display: inline-block; 添加到您的 .log 规则，应该可以解决此问题。

Answer 2

默认情况下 p 元素显示为块。如果将显示设置为 inline-block，应该可以解决问题：

.log {
      color: #FF00FC;
      font-family: Josefin Regular;
      font-size: 12.8pt;
      outline: 3.2px solid #ff00fc;
      padding: 6px;
      position: relative;
      top: 400px;
      left: 10px;
      transform: rotate(10deg);
      z-index: 0;
      
      display:inline-block
}

<p class='log'>>_</p>

Answer 3

将display改为inline-block:

.log {
  display: inline-block;
  color: #FF00FC;
  font-family: Josefin Regular;
  font-size: 12.8pt;
  outline: 3.2px solid #ff00fc;
  padding: 6px;
  position: relative;
  top: 400px;
  left: 10px;
  transform: rotate(10deg);
  z-index: 0;
}

<p class='log'>>_</p>

默认情况下，display: block 应用于 <p>，当其 position 为 relative 或 [=20= 时，这会导致它跨越其容器的整个宽度].

或者，如果.log的parent是position: relative，您可以将其更改为position: absolute，而无需申请display: inline-block :

body {
  position: relative;
}

.log {
  color: #FF00FC;
  font-family: Josefin Regular;
  font-size: 12.8pt;
  outline: 3.2px solid #ff00fc;
  padding: 6px;
  position: absolute;
  top: 400px;
  left: 10px;
  transform: rotate(10deg);
  z-index: 0;
}

<p class='log'>>_</p>

为什么我添加大纲的时候 <p> 这么长？

Why is <p> so long when I add an outline?

html

css

paragraph