Question

＆＃13;

.logo{
  background-color: white;
  width: 30px;
  height: 30px;
  border-radius: 5px;
  margin-top: 10px;
  margin-right: 20px;
  text-align: center;
  vertical-align: middle;
  line-height: 30px;
  font-size: 25px;
  color: #1f0e3e;
}

p {
  border: solid red;
  font-size: 10px;
  position: relative;
  top: -53px;
  left: -75px;
  -webkit-transform: translate(100px) rotate(48deg);
  -webkit-transform-origin: 0 0;

  transform: translate(100px) rotate(48deg);
  transform-origin: 0 0;
}

＆＃13;

<div class= "logo nav-txt" style="cursor:pointer;">K<p>text</p></div>

＆＃13;

你可以在代码片段中看到我的html + css。您还可以看到p元素周围的边框占用了覆盖文本所需的更多空间。如何使p元素仅占用覆盖文本所需的空间？我希望边框围绕文本，边框和文本之间没有空格。

Here是html / css

的小提琴演示

Answer 1

调整它的line-height属性：

MDN's docs:

<强>行高：
在块级元素上，line-height属性指定元素中线框的最小高度在未替换的内联元素上，line-height指定用于计算线框高度的高度。

＆＃13;

.logo{
  background-color: white;
  width: 30px;
  height: 30px;
  border-radius: 5px;
  margin-top: 10px;
  margin-right: 20px;
  text-align: center;
  vertical-align: middle;
  line-height: 30px;
  font-size: 25px;
  color: #1f0e3e;
}

p {
  border: solid red;
  font-size: 10px;
  line-height: 10px;
  position: relative;
  top: -53px;
  left: -75px;
  -webkit-transform: translate(100px) rotate(48deg);
  -webkit-transform-origin: 0 0;

  transform: translate(100px) rotate(48deg);
  transform-origin: 0 0;
}

＆＃13;

<div class= "logo nav-txt" style="cursor:pointer;">K<p>text</p></div>

＆＃13;

Answer 2

你需要将这两个添加到P元素

中

  line-height: 10px;
  display: inline-block;

.logo{
  background-color: white;
  width: 30px;
  height: 30px;
  border-radius: 5px;
  margin-top: 10px;
  margin-right: 20px;
  text-align: center;
  vertical-align: middle;
  line-height: 30px;
  font-size: 25px;
  color: #1f0e3e;
}

p {
  line-height: 10px;
  display: inline-block;
  border: solid red;
  font-size: 10px;
  position: relative;
  top: -53px;
  left: -75px;
  -webkit-transform: translate(100px) rotate(48deg);
  -webkit-transform-origin: 0 0;

  transform: translate(100px) rotate(48deg);
  transform-origin: 0 0;
}

<div class= "logo nav-txt" style="cursor:pointer;">K<p>text</p></div>

为什么p元素占用的空间比需要的多？

2 个答案: