[html] What's the HTML to have a horizontal space between two objects?

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!

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>

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

In HTML 4.01, the <hr> tag represents a horizontal rule.

<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>

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>

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).

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.

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

I guess what you want is:

 

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:

• How to insert spaces/tabs in text using HTML/CSS?

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>