Html Question posted in
Some basic documentation can be found here.

Html – When we use letter spacing it adds letter spacing for all the letters including the last one. How do we remove that?

(https://i.sstatic.net/fzSnPIe6.png)

I tried reducing right padding 2px yet it didn’t remove the line spacing after E.(https://i.sstatic.net/lGzbVcw9.png)
I have also tried making the right margin -2px(https://i.sstatic.net/3GqaSJLl.png).It does reduce the margin by 2 but not the content space by 2.Is there any property which can reduce the content width from the right by 2px?

Tags:

2

Answers


  1. 0

    You could use padding, it will not remove letter spacing from last character but it will manage space equally for left and right.

    padding: 7px 13px 7px 15px;

    You can also do it like this e.g.:-

    <div className="sale">
  <span className="saleText1">Sal</span>
  <span>e</span>
</div>

.sale {
  background-color: red;
  width: fit-content;
  color: white;
  padding: 7px 15px;
  text-transform: uppercase;

  .saleText1 {
    letter-spacing: 2px;
  }
}
    Login or Signup to reply.
  2. 0

    you are probably approaching the problem in an incorrect way. The problem is not that there is space after the last E in the word SALE. The actual problem is that the text is not center aligned in the <p> element that you have used.

    The paragraph element is not ideal for this use case. You should be using a <div> instead. <p> is used when you have a paragraph of reading content. Your "sale" sign is more of a decorative text.

    Try out something like this:

            body {
            font-family: sans-serif;
          margin: 50px auto;
          display: flex;
          flex-flow: row;
          align-items: center;
          justify-content: center;
        }
        .sale-ad {
            max-width: 70%;
          padding: 20px;
          border: 3px solid #000;
          position: relative;
        }
        
        .sale {
            position: absolute;
            top: 0;
            left: 0;
            transform: translate(-50%, -50%);
            
            background-color: red;
            color: #fff;
            padding: 15px 30px;
            font-size: 30px;
            letter-spacing: 2px;
            box-shadow: 2px 2px 5px 0px #0009;
        }
        
        img {
          width: 100%;
        }
    <html>
    <body>
        <div class="sale-ad">
            <div class="sale">SALE</div>
            <img src="https://i.pinimg.com/originals/fe/0e/09/fe0e09e1b19a197a8e66011a10202f7e.png" />
        </div>
    </body>
</html>

    Note how I avoid using exact values in top and left and use transform instead. This is so that if I change the text from "Sale" to something else (like "sale 50% off"), I will not have to recalculate the coordinates.

    Hope this helps.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search