CODEWITHSUNDEEP
htmlcsscharacterparagraphletter
Sujoy
Sujoy

Reputation: 1207

CSS first-letter formatting reducing gap between first and second character

I am using the following css :

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

I want to reduce the gap between the first and the second character. For example in this website I want to reduce the space between 'T' and 'h' in the first word 'Thakur'.

Upvotes: 2

Views: 1660

Answers (5)

geeksal
geeksal

Reputation: 5016

You can give negative right margin:

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

You can give margin either in percentage or pixel. You can also use letter-spacing property as recommended by @parag-parmmar but it is better to give value in % because your font-size is relative. Refer this post to know more about letter-spacing. You have given font-size in percentage. But, I would recommend you to look at rem units for font sizing. Have a look at this wonderful post.

Upvotes: 3

Paulie_D
Paulie_D

Reputation: 115045

Use a negative margin on p::first-letter. The value will depend on your specific circumstances.

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>

Upvotes: 1

Mohammad Usman
Mohammad Usman

Reputation: 39322

Use negative values for 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>

Upvotes: 2

parag parmar
parag parmar

Reputation: 146

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

Upvotes: 5

Shrinivas Pai
Shrinivas Pai

Reputation: 7701

Try This margin: -5px;

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

}

Upvotes: 0

Related Questions