添加大纲时为什么<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元素显示为块.如果您将显示设置为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 2

更改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或时跨越其容器的整个宽度static.

或者,如果.log父母是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>