I can't get the word all to stay inline when I want to style it differently. How to solve?

        <p >
        This page has</p><p >all</p><p > you want.
        </p>

p.SixtyFive {
    font-size: 20vw;
    text-indent: 0;
    display: block;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
}

Codepen

I've tried different solutions.

Also, I've tried to solve it with browser tools by selecting the specific element. That's how I got the attributes/properties below the text-indent property.

CodePudding user response：

you need to add display:inline to all the paragraph elements

html:

<p >This page has</p>
<p >all</p>
<p > you want.</p>

css:

p.SixtyFive {
    font-size: 20vw;
    text-indent: 0;
    display: inline;
}
p.intro{
  display: inline;
}

CodePudding user response：

As @Toastrackenigma correctly said, you should use a span tag;

span.SixtyFive {
  font-size: 20vw;
  text-indent: 0;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
}

<span >This page has</span>
<span >all</span>
<span > you want.</span>

CodePudding user response：

Use a span tag (which is inline by default), don't end the p tag before the span (but only at the end) and delete the display: block and all other unnecessary stuff from your css class rule:

span.SixtyFive {
  font-size: 20vw;
}

<p >This page has <span >all</span> you want.</p>

CodePudding user response：

When you use display: inline, you need to use it on the parent, i.e. the element that encloses what you want to inline.

p {
  display: inline;
}

p.SixtyFive {
    font-size: 20vw;
    text-indent: 0;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
}

<p >
  This page has</p><p >all</p><p > you want.
</p>