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

Html – How to add a space between words after <em> element

I cannot figure out how to make space after an italic word the same as before

<em> element too close to next word:

element too close to next word

I tried to add word-spacing with :after pseudo-selector, but it has no effect and content: " " doesn’t do anything with actual placement of letters. Adding another space in the <h3> or <em> tag don’t work too. I tried to write "word-spacing-right", but there is no such thing

Tags:

3

Answers


  1. 0

    If you want to add a space between words after an element in HTML, you can achieve that using CSS. You can use the ::after pseudo-element to add content after the element and apply a margin-left property to create a space between the content and the text that follows the element. Here’s an example:

    <p>This is <em>emphasized</em> text. Following text.</p>

<style>
em::after {
  content: " "; /* Add a space after the <em> element */
  margin-left: 5px; /* Adjust the space size as needed */
}
</style>
    Login or Signup to reply.
  2. 0

    Use Non-Breaking Spaced entity (&nbsp;) to increase the spacing. For Example
    <p>This is Test</p>.
    And to increase space between the words

    <p>This is Test</p>

<p>This&nbsp;&nbsp;&nbsp;&nbsp;is&nbsp;&nbsp;&nbsp;&nbsp;Test</p>

<p>This&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;is&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Test</p>

<p>This is emphasized text</p>

<p>This is <em>emphasized</em>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text</p>
    Login or Signup to reply.
  3. 0

    The problem you are trying to solve occurs when the true italic style of a font is not available to the browser, typically because the website author omitted to reference it. You have not posted any of your code, so I don’t know if this applies to your case, but it’s my guess that it does. If so, then the solution is simply to reference the true italic style of the font.

    The two snippets below demonstrate the problem and the solution.

    In this first snippet, the true italic style of the font is not referenced. The browser simulates italic type by simply slanting the letters of the normal type. However, it doesn’t adjust the spacing, resulting in the words being too close together.

    @import url('https://fonts.googleapis.com/css2?family=Amaranth:wght@700&display=swap');

body {
  font-family: Amaranth;
  font-size: 3em;
}
    Red <em>Red</em> Red

    In this second snippet, the true italic style of the font is referenced (in addition to the normal style). Note that the letters are shaped differently; that’s because the true italic style has been carefully and thoughtfully crafted by the font designer. The font designer also specifies the correct spacing between letters and between words, including the spacing between italic and normal type.

    @import url('https://fonts.googleapis.com/css2?family=Amaranth:ital,wght@0,700;1,700&display=swap');

body {
  font-family: Amaranth;
  font-size: 3em;
}
    Red <em>Red</em> Red

    Here is an excerpt from the CSS @font-face rules imported from the Google link in the second snippet. You should ensure that your code contains something similar.

    @font-face {
  font-family: 'Amaranth';
  font-style: normal;
  font-weight: 700;
  src: url(https://example.com/xyz.woff2) format('woff2');
}

@font-face {
  font-family: 'Amaranth';
  font-style: italic;
  font-weight: 700;
  src: url(https://example.com/xyz-italic.woff2) format('woff2');
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search