CODEWITHSUNDEEP
javascripthtmlcss
Mr.cysl
Mr.cysl

Reputation: 1614

How to make html <p> tag not add a newline but a trailing space in css?

I have some text blocks to be displayed in the same line. I tried to wrap up them so that I do not need to add white spaces between them. However, when I tried <p>, it seems that will do a line break. Is there anyway to change that to a trailing space, or using other tags to achieve the goal?

Upvotes: 0

Views: 876

Answers (2)

yourcomputergenius
yourcomputergenius

Reputation: 333

Typically this is done with unordered list elements <li></li> wrapped in <ul></<ul> and styled in CSS to be display:inline;.

Then you can add your left-margin or right-margin values as you prefer for spacing.

    <style>
    ul li {
      display: inline;
      margin-right: 10px;
      color: blue;
    }
    </style>
    
    <ul>
      <li>Some Text</li>
      <li>More Text</li>
      <li>Some More</li>
    <ul>

Upvotes: 0

Unmitigated
Unmitigated

Reputation: 89324

You can create a non-breaking space using &nbsp;

Text&nbsp;Text

You can also use an element's margin properties to set its distance from the nearest element (there are four margin properties: margin-top, margin-bottom, margin-right, and margin-left).

<span>Text text text</span><span style="margin-left: 30px;">More text more text</span>

You can use display: inline-block to make elements stay on the same line. Just alter the margin-right and margin-left properties to adjust the space between the elements.

.square{
 width: 50px; 
 height: 50px;
 display: inline-block;
 border: 1px solid black;
 background-color: dodgerblue;
}
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square" style="margin-left: 300px;"></div>

Upvotes: 2

Related Questions