Adding a space between two linked labels

Question

This might be the silliest question ever. But how do I get to put a space between the Edit and the Delete labels?

echo "  <a href=\"update.php?id=" . $id . "\"> Edit </a>";      
echo "  <a href=\"confirm.php?id=" . $id . "\"> Delete </a>";

I tried putting echo " "; in between but doesn't work. The underline is straight from Edit to Delete as if they are the same label!

Answer 1

You might try to insert a non-breaking space between those :

echo "  <a href=\"update.php?id=" . $id . "\"> Edit </a>";      
echo ' &nbsp; ';
echo "  <a href=\"confirm.php?id=" . $id . "\"> Delete </a>";

Seems to help, here.

But, as an end-user, I tend to prefer having a dash between that kind of links :

echo "  <a href=\"update.php?id=" . $id . "\"> Edit </a>";      
echo ' - ';
echo "  <a href=\"confirm.php?id=" . $id . "\"> Delete </a>";

I just find it more easy to read and see there are actually two separate links.

Answer 2

remove the space between > and Edit, as well as the one between Edit and <.

Do the same for Delete.

The issue is that spaces are trimmed out of HTML, so that " " and " " are treated the same. When you have a space inside the tag it's underlining that space, then the space outside the tag is ignored (Because it is trimmed out).

Answer 3

Try putting

echo ' ' 

between your two echo.

Answer 4

The easiest way, given your current code, is probably:

echo "  <a href=\"update.php?id=" . $id . "\">Edit</a> <a href=\"confirm.php?id=" . $id . "\">Delete</a>";

Failing that, I'd personally use the following

CSS:

ul {display: block; }

ul li {display: inline; margin: 0 0.5em; border-left: 1px solid #000; }

ul li:first-child {border-left: 0 none transparent; } 

PHP

echo "<ul>";
echo "<li><a href=\"update.php?id=" . $id . "\">Edit</a></li>";      
echo "<li><a href=\"confirm.php?id=" . $id . "\">Delete</a></li>";
echo "</ul>";

Incidentally the problem with your code is that, in html, all white-space (outside of <pre> tags or  ) is collapsed down to a single space. So the underline of the a element extends into the spaces (as you've coded them, hence my first suggestion) enclosed within the link, and as any spaces between the closing of one a and the opening of the next is then collapsed into a single-space the underline does, indeed, run from one a up to the border of the next and, without trying to check, might even overlap each other, since that white-space is enclosed within the links.

...I might have to re-write that explanation a bit. =/ Hopefully it's useful to you, though. Anyway, that's why I initially removed the white-space from the links, and put it between the links instead.