Add Css Margin If Not First Word Of A Line

I have one span within another. Text Highlighted text More text I want to add a left margin to the inne

Solution 1:

Here is a solution how you could solve that. (Added the extra wrapper to show how it behaves when line breaks)

Update

The gap between the "More text" and "Text" is now solved.

.wrapper { width: 50%; background-color: #ddd; }

.main {
  color:#3930FF;
  margin-right: 10px;
}
.hlgt {
  background-color: #FFED00;
  margin-right: 10px;
}
.hlgt + .main {
  margin-right: 0px;
}

<div class="wrapper">
  <span class="main">Text </span><span class="hlgt">Highlighted text</span><span class="main"> More text</span>      
  <span class="main">Text </span><span class="hlgt">Highlighted text</span><span class="main"> More text</span>      
  <span class="main">Text </span><span class="hlgt">Highlighted text</span><span class="main"> More text</span>      
</div>

Update 2

You can actually do like this as well and get the same result with even less markup.

.wrapper { width: 50%; background-color: #ddd; }

.main {
  color:#3930FF;
  margin-right: 10px;
}
.hlgt {
  background-color: #FFED00;
  margin-right: 10px;
}

<div class="wrapper">
  
  <span class="main">Text </span>
  <span class="hlgt">Highlighted text</span>
  <span class="main"> More text
  
  Text </span>
  <span class="hlgt">Highlighted text</span>
  <span class="main"> More text
  
  Text </span>
  <span class="hlgt">Highlighted text</span>
  <span class="main"> More text</span>
  
</div>

Solution 2:

I have a partial solution for your question, this is only able to put a margin-left on the element when it is not the first word of the line. Using the same HTML markup in your question, you can add this to your CSS:

.main {
    display: inline-block;
    text-indent: -10px;
    color:#3930FF;
}

.main::first-letter {
    margin-left: 10px;
}

.hlgt {
    display: inline-block;
    margin-left: 10px;
    text-indent: 0;
    background-color: #FFED00;
}

This uses a combination of the first-letter pseudo-element and the text-indent rule to achieve this effect.

See this JSFiddle to see it work :)

Solution 3:

Here's another approach, short and sweet!

.wrapper {
  width: 50%;
  background-color: #ddd;
}
.hlgt {
  background-color: #FFED00;
  margin: 0 10px;
}
.hlgt::before,
.hlgt::after {
  font-size: 0px;
  content: " ";
}

<div class="wrapper">
    Text<span class="hlgt">Highlighted text</span> More text
    Text<span class="hlgt">Highlighted text</span> More text
    Text<span class="hlgt">Highlighted text</span> More text
    Text<span class="hlgt">Highlighted text</span> More text
    Text<span class="hlgt">Highlighted text</span> More text
    Text<span class="hlgt">Highlighted text</span> More text
</div>

Solution 4:

You could either do it by using the margin-left: 10px statement or, if you wish to use your current notation, you can do margin: 0px 0px 0px 10px.

The way margin works in CSS is it applies the margins clockwise as you go around the element - the first amount is margin-top, second is margin-right, third is margin-bottom, and fourth is margin-left so, in your case, you'd want a margin with a value of 0px 0px 0px 10px to get the margin-left effect you were going for.

Have a play around here if you'd like.