CODEWITHSUNDEEP
phphtmlcss
Dalton
Dalton

Reputation: 19

How can I add space between two horizontal images?

The Images which are hyperlinked don't appear to have any horizontal space between them and so look scrunched up. Applying a width doesn't seem to work and I've tried other Answers which don't work.

enter image description here

Here is my PHP code:

<?php
include_once("php_includes/check_login_status.php");
if($user_ok != true || $log_username == ""){
    header("location: http://burningchat.tk/home");
    exit();
}
$_SESSION['user_id'] = md5(time());
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body{ margin: 0px; text-align: center; font-family: Arial; }
#pagetop{
    position: fixed;
    top: 0px;
    width:100%;
    height: 120px;
    background: #FF5C26;
    color: #FFF;
    font-size: 23px;
    padding-top: 50px;
    transition: height 0.3s linear 0s, padding 0.3s linear 0s;
    overflow:hidden;
}
#pagetop > #menu{
    position: absolute;
    bottom: 0px;
    width:100%;
    background: #FD4000;
    height: 50px;
    transition: height 0.3s linear 0s;
}
#wrapper{ margin-top: 230px;
}
#mainbody{ 
    margin-top: 50px; 
    display:block;
}
</style>
<script>
var pagetop, menu, yPos;
function yScroll(){
    pagetop = document.getElementById('pagetop');
    menu = document.getElementById('menu');
    yPos = window.pageYOffset;
    if(yPos > 150){
        pagetop.style.height = "36px";
        pagetop.style.paddingTop = "8px";
        menu.style.height = "0px";
    } else {
        pagetop.style.height = "120px";
        pagetop.style.paddingTop = "50px";
        menu.style.height = "50px";
    }
}
window.addEventListener("scroll", yScroll);
</script>
</head>
<body>
<div id="pagetop">
  The Gaming Hub
  <div id="menu"><a href="http://burningchat.tk/home/user.php"><img src="images/home.png" alt="Chat" border="0" title="Go Back to Burning Chat"></a></div>
</div>
<div id="wrapper">
<h1><span style="font-family:tahoma,geneva,sans-serif;">Welcome to the Gaming Hub,</span></h1>

<p><span style="font-family:tahoma,geneva,sans-serif;">Whether the need is for something fun, or just to pass the time. Burning Chat&#39;s Gaming Hub allows a variety of fun activities, all for free.</span></p>
<hr width="50%">
<div id="mainbody">
<a href="http://burningchat.tk/home/chat/type/standard.html"><img src="images/standard.png" alt="Chat" border="0" title="Standard"></a>

<a href="http://burningchat.tk/home/chat/type/carbon.html"><img src="images/carbon.png" alt="Chat" border="0" title="Carbon"></a>

<a href="http://burningchat.tk/home/chat/type/gamer.html"><img src="images/gamer.png" alt="Chat" border="0" title="Gamer"></a>

</body>
</html>

Upvotes: 0

Views: 3050

Answers (1)

LVDM
LVDM

Reputation: 454

Use margin in the element like this:

 #mainbody a{
      margin: 0 5px;
 }

Upvotes: 2

Related Questions