How to remove spacing between text in html

Question

I have the following code:

 .underline { --line: #646B8C; --color: #2B3044; text-decoration: none; color: var(--color); position: relative; width: 140px; margin: 16px 0; }.underline span { background-image: linear-gradient(0deg, var(--line) 0%, var(--line) 100%); background-position: 100% 100%; background-repeat: no-repeat; background-size: var(--background-size, 100%) 1px; transition: background-size 0.2s linear var(--background-delay, 0.15s); font-size: 16px; line-height: 20px; transform: translateZ(0); }.underline spanS { background-image: linear-gradient(0deg, var(--line) 0%, var(--line) 100%); background-position: 100% 100%; background-repeat: no-repeat; background-size: var(--background-size, 100%) 1px; transition: background-size 0.2s linear var(--background-delay, 0.15s); font-size: 14px; line-height: 19px; transform: translateZ(0); }.underline svg { vertical-align: top; display: none; width: auto; height: 0; position: relative; fill: none; stroke-linecap: round; stroke-linejoin: round; }.underline:hover { --background-size: 0%; --background-delay: 0s; --stroke-dashoffset: 26; --stroke-duration: .3s; --stroke-easing: cubic-bezier(.3, 1.5, .5, 1); --stroke-delay: .195s; }

 <p>Through <a target="_blank" rel="noopener noreferrer" href="https://www.datacamp.com/" class="underline"> <spanS>DataCamp</spanS> <svg viewBox="0 0 13 20"> <polyline points="0.5 19.5 3 19.5 12.5 10 3 0.5" /> </svg> </a>, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>

How would I remove the space between the comma and DataCamp ? How would I remove this space:

Any suggestions on how I can accomplish this? I tried removing the width property, but it still did not work. What css property is causing this issue?

Answer 1

You can place all of your a tags code and the following text on one line without any returns in the code editor. This will remove the unwanted white space in between the a tag and the comma.

  <a target="_blank" rel="noopener noreferrer" href="https://www.datacamp.com/" class="underline"><span>DataCamp</span><svg viewBox="0 0 13 20"><polyline points="0.5 19.5 3 19.5 12.5 10 3 0.5" /></svg></a>, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 .underline { --line: #646B8C; --color: #2B3044; text-decoration: none; color: var(--color); position: relative; width: 140px; margin: 16px 0; }.underline span { background-image: linear-gradient(0deg, var(--line) 0%, var(--line) 100%); background-position: 100% 100%; background-repeat: no-repeat; background-size: var(--background-size, 100%) 1px; transition: background-size 0.2s linear var(--background-delay, 0.15s); font-size: 16px; line-height: 20px; transform: translateZ(0); }.underline spanS { background-image: linear-gradient(0deg, var(--line) 0%, var(--line) 100%); background-position: 100% 100%; background-repeat: no-repeat; background-size: var(--background-size, 100%) 1px; transition: background-size 0.2s linear var(--background-delay, 0.15s); font-size: 14px; line-height: 19px; transform: translateZ(0); }.underline svg { vertical-align: top; display: inline; width: auto; height: 0; position: relative; fill: none; stroke-linecap: round; stroke-linejoin: round; }.underline:hover { --background-size: 0%; --background-delay: 0s; --stroke-dashoffset: 26; --stroke-duration: .3s; --stroke-easing: cubic-bezier(.3, 1.5, .5, 1); --stroke-delay: .195s; }

 <p>Through <a target="_blank" rel="noopener noreferrer" href="https://www.datacamp.com/" class="underline"><spanS>DataCamp</spanS><svg viewBox="0 0 13 20"><polyline points="0.5 19.5 3 19.5 12.5 10 3 0.5" /></svg></a>, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>

Answer 2

There is svg element between DataCamp and coma, it may not render but keep a space. Try to remove it or change display: inline to display: none in .underline svg rule. Also, there is no spanS tag in HTML, it should be just span .

Answer 3

Quick and dirty;-) Add margin-right: -5px; to your .underline spanS class.

Answer 4

The space is caused by the a tag. You did it like this:

<a href="#">foo></a>
bar

which yields "foo bar" not "foobar", yes? Same thing is happening with your comma. So if you don't want to move things around you can do that whole thing on one line (not ideal but if you hate it you can rearrange).

Put this all on one line:

<a target="_blank" rel="noopener noreferrer" href="https://www.datacamp.com/" class="underline">
    <spans>DataCamp</spans>
    <svg viewBox="0 0 13 20">
                      <polyline points="0.5 19.5 3 19.5 12.5 10 3 0.5"></polyline>
                    </svg>
</a>

like this:

<a target="_blank" rel="noopener noreferrer" href="https://www.datacamp.com/" class="underline"><spans>DataCamp</spans><svg viewBox="0 0 13 20"><polyline points="0.5 19.5 3 19.5 12.5 10 3 0.5"></polyline></svg></a>

Answer 5

The unwanted gap between the end of DataCamp and the comma seems to be caused by whitespace in the HTML.

This snippet removes the newline before the svg tag and the one before the closing a tag.

 .underline { --line: #646B8C; --color: #2B3044; text-decoration: none; color: var(--color); position: relative; width: 140px; margin: 16px 0; }.underline span { background-image: linear-gradient(0deg, var(--line) 0%, var(--line) 100%); background-position: 100% 100%; background-repeat: no-repeat; background-size: var(--background-size, 100%) 1px; transition: background-size 0.2s linear var(--background-delay, 0.15s); font-size: 16px; line-height: 20px; transform: translateZ(0); }.underline spanS { background-image: linear-gradient(0deg, var(--line) 0%, var(--line) 100%); background-position: 100% 100%; background-repeat: no-repeat; background-size: var(--background-size, 100%) 1px; transition: background-size 0.2s linear var(--background-delay, 0.15s); font-size: 14px; line-height: 19px; transform: translateZ(0); }.underline svg { vertical-align: top; display: none; width: auto; height: 0; position: relative; fill: none; stroke-linecap: round; stroke-linejoin: round; }.underline:hover { --background-size: 0%; --background-delay: 0s; --stroke-dashoffset: 26; --stroke-duration: .3s; --stroke-easing: cubic-bezier(.3, 1.5, .5, 1); --stroke-delay: .195s; }

 <p>Through <a target="_blank" rel="noopener noreferrer" href="https://www.datacamp.com/" class="underline"> <spanS>DataCamp</spanS><svg viewBox="0 0 13 20"> <polyline points="0.5 19.5 3 19.5 12.5 10 3 0.5" /> </svg></a>, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>