54

I have been searching for an answer and trying different things without success. Could someone kindly let me know how to put spaces between two objects by using PHP code? (Please note: I use WordPress, in case that makes a difference.)

I know how to do so vertically with </br>, but what is the horizontal equivalent to that?

Please note that I don't know a whole lot about code, so any detailed information you are able to provide is very much appreciated in advance - thank-you very much!

casraf
  • 21,085
  • 9
  • 56
  • 91
user2376452
  • 551
  • 1
  • 4
  • 5

10 Answers10

54

I guess what you want is:

&nbsp;

But this is usually not a nice way to align some content. You better put your different content in

<div>

tags and then use css for proper alignment.

You can also check out this post with useful extra info:

Community
  • 1
  • 1
Chief Wiggum
  • 2,784
  • 2
  • 31
  • 44
  • Thanks for the information, however, I have already tried nbsp without success for this. Any other div tags put this stuff on a new line, but I'm looking for it all to stay on the same line. – user2376452 May 13 '13 at 06:03
  • CSS isn't always an option, e.g., I'm here because I'm trying to format things in an atom feed where all stylesheets and most inline CSS will get stripped. – Peter Gerdes Jul 25 '22 at 00:46
12

You should put a padding in each object. For example, you want a space between images, you can use the following:

img{
   padding: 5px;
}

That means 5px paddin for ALL sides. Read more at http://www.w3schools.com/css/css_padding.asp. By the way, studying a lot before attempting to program will make things easier for you (and for us).

Benjamin Loison
  • 3,782
  • 4
  • 16
  • 33
kireirina
  • 163
  • 8
9

CSS

div.horizontalgap {
  float: left;
  overflow: hidden;
  height: 1px;
  width: 0px;
}

Usage in HTML (for a 10px horizontal gap)

<div class="horizontalgap" style="width:10px"></div>
Benjamin Loison
  • 3,782
  • 4
  • 16
  • 33
Arup Hore
  • 1,509
  • 15
  • 9
  • This approach also works for vertical gaps, change the `DIV` style to `height` instead of `width`. I confirmed by testing with Chrome. – Danny Lacks Jun 30 '16 at 21:58
8

<div> looks nice, but a bit complicated in setting all these display: block, float: left... Maybe because the general idea behind <div> is a block of a paragraph size or more.

I have found the following nice way for spacing:

<button>Button 1></button>
<button style="margin-left: 4em">Button 2</button>
Mikhail M
  • 929
  • 2
  • 10
  • 23
3

PHP does not do styling. You need to use html or css. Take a look at http://www.w3schools.com/tags/tag_hr.asp

In HTML 4.01, the

tag represents a horizontal rule. 
In HTML 4.01, the <hr> tag represents a horizontal rule.
Eddie Jaoude
  • 1,698
  • 15
  • 23
  • Thanks for the information so far. I didn't see anything on that w3 schools link that seemed to help. I checked out the hr tag a little bit and it seems to be about adding a horizontal line. I just need blank spaces, but not a line. (Please note that I have tried the nbsp code already and it's not working for this. – user2376452 May 13 '13 at 05:51
  • Can you not add padding/margin with css? – Eddie Jaoude May 13 '13 at 05:53
  • If I try `

    `, it keeps putting things on a different line.

     – user2376452 May 13 '13 at 06:02
  • May be there is not enough space on that line? Try a smaller padding? potentially with a float? It is difficult to help with limited visibility – Eddie Jaoude May 13 '13 at 06:11
  • I unfortunately don't know what you're referring to by 'float'. By limited visibility, I think you mean to say that seeing more of the code would be beneficial. `
    `     – user2376452 May 13 '13 at 06:22
  • Yes, 'more visibility', I mean more: code, explaination, url. This would help us to help you. – Eddie Jaoude May 13 '13 at 06:24
  • I just posted some of the code. It was too long in its original form, so some of the other button codes were deleted from the above to compensate. That said, I hope that helps to provide an idea. How can I control the horizontal spacing between those? – user2376452 May 13 '13 at 06:27
  • Before when you tried padding, you applied it all the way around, apply it the side you require (i.e top). It would probably be better to apply a bottom margin to the item above, i.e. push the item below away – Eddie Jaoude May 13 '13 at 06:31
  • I currently start this whole thing out with `

    `, which is perfect for the first button from the left margin. But, then when I try to use that code again elsewhere, it keeps putting that next button on to a new line. I'm looking for the left padding and control the horizontal spacing between the other buttons while keeping everything on the same horizontal line.

     – user2376452 May 13 '13 at 06:35
  • Use firebug in firefox to inspect what is going on. It will show you margins/paddings etc so you can analyse why it behaving that way. – Eddie Jaoude May 13 '13 at 06:41
  • Thank-you for your time. I found [site](http://code.cside.com/3rdpage/us/space.html) which has a code of ` ` that helps give me my desired results. It doesn't provide a complete answer, but it's the closest I've been able to come thus far. Thanks for your time! – user2376452 May 13 '13 at 07:42
3

You could use the old ways. And use a table. In the table you define 3 columns. You set the width of your whole table and define the width of every colum. that way you can horizantaly space 2 objects. You put object one inside cell1 (colum1, row1) and object2 in cell3 (colum 3, row 1) and you leave cell 2 empty. Given it has a width, you will see empty spaces. example

<table width="500">
    <tr>
        <td width="40%">
            Object 1
        </td>
        <td width="20%">

        </td>
        <td width="40%">
            Object 2
        </td>
    </tr>
</table>

Or you could go the better way with div's. Just put your objects inside divs. Add a middle div and put these 3 divs inside another div. At the css style to the upper div: overflow: auto and define a width. Add css style to the 3 divs to define their width and add float: left example

<div style="overflow: auto;width: 100%;">
    <div style="width:200px;float: left;">
        Object  1
    </div>
    <div style="width:200px;float: left;">

    </div>
    <div style="width:200px;float: left;">
        Object  2
    </div>
</div>
HoldOffHunger
  • 18,769
  • 10
  • 104
  • 133
roel
  • 2,005
  • 3
  • 26
  • 41
  • I did not try the tables but the code involving "overflow" is exactly and precisely what I wanted and, I believe, what the OP wanted. I wish I could mark it as THE SOLUTION. – schremmer Nov 23 '15 at 06:01
2

I think what you mean is putting 2 paragraphs (for example) in 2 columns instead of one below the other? In that case, I think float is your solution.

<div style="float: left"> <!-- would cause this to hang on the left -->
<div style="float: right"> <!-- would cause this to hang on the right-->

Here's an example: http://jsfiddle.net/XPfLA/1

casraf
  • 21,085
  • 9
  • 56
  • 91
2

Well, this is probably frowned upon but you can make a 1px transparent image, then size it as needed in between text.

Some text <img src="spacer.png" height="1px" width="10px"> Some more text

I've run into this issue when one or two spaces just wasn't enough for my design sensibilities.

dtmp
  • 19
  • 4
0

Another way you can add horizontal space between elements is to set up labels to preserve spaces in css:

label {
   white-space: pre;
}

..and then add a label with as many spaces as you want:

<label>  </label>
Benjamin Loison
  • 3,782
  • 4
  • 16
  • 33
B. Clay Shannon-B. Crow Raven
  • 8,547
  • 144
  • 472
  • 862
0

I prefer shorter code, like this:

<span>ONE THING</span>
<span style="margin-left:30px">ANOTHER THING</span>

You can add style="margin-left:30px" to any element, not just <span>s.

Yan King Yin
  • 1,189
  • 1
  • 10
  • 25