Question

我正在使用以下css：

p::first-letter {
    font-size: 400%;
    line-height: 0;
}

我想减少第一个和第二个字符之间的差距。例如，在此website中，我希望缩小“T＆＃39;”之间的空间。并且＆＃39; h＆＃39;在第一个单词＆＃39; Thakur＆＃39;。

Answer 1

p::first-letter {
    letter-spacing: -8px;
}

Answer 2

您可以给出负右边距：

＆＃13;

p:first-letter{
  font-size: 400%;
  line-height: 0;
  margin-right:-2%;
}

＆＃13;

<p>Thakur</p>

＆＃13;

您可以以百分比或像素为单位给出保证金。您也可以使用@ parag-parmmar建议的letter-spacing属性，但最好在%中给出值，因为您的字体大小是相对的。请参阅this帖子以了解有关字母间距的更多信息。您已按百分比给出font-size。但是，我建议你看一下rem单位的字体大小。看看this精彩帖子。

Answer 3

使用margin-right的负值：

p::first-letter {
  margin-right: -5px;
}

body, p, div, h1, h2, h3, h4, h5, h6, h7 {
  font-family: Cambria;
  font-size: 20px;
}

body {
  padding: 25px;
}
p {
  margin: 0 0 10px;
}

p::first-letter {
  display: inline-block;
  margin: 0 -6px 0 0;
  font-size: 300%;
  line-height: 0;
}

<p>Thakur Anukulchandra was a highly accomplished spiritual teacher and the ideal of Netaji Subhash Chandra Bose. He was a very outspoken person yet extremly polite. He contributed more than 80 books on various subjects and many people have written biographies on Him, yet less is knows about Him. Ray A Hauserman, a US vetran of World War II became His disciple and later went on writing few books on Him. Eminent Indians like Deshbandhu Chittaranjan Das, Mahatma Gandhi, Lal Bahadur Shashtri, Shyama Prasad Mukherjee came to meet Thakur to acquire His blessings. People from different parts of the world and different walks of life like scientists, scholars, doctors, lawers, educationalists came to seek wisdom. Continue...</p>

Answer 4

在p::first-letter上使用负边距。价值取决于您的具体情况。

p {
  font-family: "Times"
}
p::first-letter {
  font-size: 400%;
  line-height: .25em;
}
p.dropcap::first-letter {
  margin-right: -.125em;
  color:red;
}

<p class="dropcap">Torem ipsum dolor sit amet, consectetur adipisicing elit. Maxime eius sapiente distinctio et, inventore voluptatum necessitatibus perspiciatis, dignissimos cumque, doloribus beatae aliquid deleniti at dolorum. Sunt soluta quae totam eligendi cumque consectetur
  ipsam, iste mollitia.</p>

<p>Torem ipsum dolor sit amet, consectetur adipisicing elit. Maxime eius sapiente distinctio et, inventore voluptatum necessitatibus perspiciatis, dignissimos cumque, doloribus beatae aliquid deleniti at dolorum. Sunt soluta quae totam eligendi cumque consectetur
  ipsam, iste mollitia.</p>

Answer 5

试试这个margin: -5px;

p.prophet::first-letter {
    margin: -5px;
    font-size: 400%;
    line-height: 0;

}

CSS首字母格式减少第一个和第二个字符之间的差距

5 个答案: