Displaying an Element Similar to P Inside a Span

Displaying an element similar to p inside a span?

p has a meaning.

If your content matches p’s definition, you should use p. Then you should use a div instead of a span (unless there is no other suitable candidate):

<div>
  <p>…</p>
</div>

If your content doesn’t match p’s definition, you shouldn’t use p. Then you could use span instead of p (if there is no other suitable candidate):

<span>
  <span>…</span>
</span>

span and div don’t have meanings. So you only have to consider where they are placed syntactically (block vs. inline). You can swap them without losing/changing any semantics:

<div>
  <span>…</span>
</div>

<div>
  <div>…</div>
</div>

Note that all this doesn’t have anything to do with how these elements are styled. You can style a block-level element with CSS so that it appears as inline and vice-versa: display:inline; resp. display:block;.

Why p nested in span leads for a block element?

You simply cannot nest a p element inside a span element. The span element's content model should be phrasing content, which excludes elements such as p and heading elements. Since the span element's end tag is not omissible (i.e. it is required), the p element's start tag does not implicitly close the span element, so you get a validation error. However, browsers try to recover from the error, and they still render the p element as a block element.

To avoid this type of error in the future, I recommend validating HTML code using the W3C's HTML Validator and consulting the consulting the HTML5 specification (or a similar reference) about content models.

How to make my span element and p element on the same line?

Are you sure you are loading the css correctly? Because display:inline-block works here:

p{  display:inline-block}

        <div>             <p>嘉義縣</p><span>今日18:00~明日06:00</span>             <p>陰時多雲短暫陣雨或雷雨</p>             <p>25℃~30℃</p><span>降雨機率:30%</span>        </div>

Tag p inside a span doesn't apply css style

<span> is inline level element, it cannot be placed around a <p> element because Paragraphs <p> is block level element. The rule is that block level elements can contain any number of inline or block elements. Inline level elements can only contain inline elements.

Your HTML should be the following and it'll work: http://jsfiddle.net/amyamy86/RENbN/

<div class="grey">
   <p align="justify"><b>Text</b></p>
</div>

<span class="grey">
  Text 2
</span>

For more information regarding inline and block elements see:

display:inline vs display:block
http://www.impressivewebs.com/difference-block-inline-css/

If you are still seeing "Text" in black is mostly because there is some CSS selector that has higher specificity and is overriding your .grey selector.

How can i keep several p tags on the same line/

Wrap all p in a container and add display: flex. It will place all p tag left to right. But you need to add some space between them with gap: .5rem;

Add space as per your requirements.

TIP: p tags are not for this purpose, they are meant to be come in new line, You should use span instead. They are by default inline

.p-container{
  display: flex;
  gap: .5rem;
}

<div class="diva">
  <h1>Katy's Geck-Tacular Geckos!</h1>
  <div class="p-container">
    <p>Hello</p>
    <p>customer</p>
    <p>welcome!</p>
  </div>
  
</div>

How to put p tag and span tag in a single line

Hope this will solve your problem.Thank you.

#h3 {  padding: 0;  margin: 0;  width: 268px;  margin-left: 116px;  font-size: 18px;  color: #369;  font-weight: bold; display: flex; flex-direction: row;
}
#heart {  color: grey;  font-size: 15px;      }
.close {  font-size: 18px;   padding: 10px;}

<p id="h3">  this is me .Check this out .What I have done.This answer solved my problem <span><i class="fa fa-heart" id="heart"></i><span class="close">x</span></p>   <!--i have a heart icon -->

Displaying an Element Similar to P Inside a Span