jack jack - 2 years ago 121
CSS Question

HTML why does margin-top not work?

Hello I have a web page using css, html and php. Look at this code for a minute please:


include_once "mysql_connect.php";
$log = null;
$log = $_SESSION["ID"];
$_SESSION["prevpage"] = "home";
$terms = $_POST["search"];
if($terms == null){
<title><?php echo $terms;?></title>

<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />

<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/text.css">
<link rel="stylesheet" href="css/960_24_col.css">
<link rel="stylesheet" href="css/style.css">
<meta name="description" CONTENT="Find everything and anything on Omicrome">
<div class = "container_24">
<div id = "rectban">
<li><a href="home">Home</a></li>
<li><a href="articles">Articles</a></li>
<li><a href="about">About</a></li>
<?php if($log != null){?>
<li id = "myprofilebanner"><a href="MyProfile">My Profile</a></li>
<?php }else{ ?>
<li id = "myprofilebanner"><a href="createAccount">Create Account</a> </li>
<?php } ?>

<li id = "loginbanner"><a href= <?php if($log != null){?>"logout.php"<?php }else{?>"login"<?php }?>><?php if($log != null){?>Log Out<?php }else{?>Log In <?php }?></a></li>

<div id = "Postban">
<form action="searchresults.php" method="post" enctype="multipart/form-data">
<input class="searchbar" type="text" name="search" size="30" maxlength = "500" placeholder="Search"/>
<input type="submit" class = "searchbtn" value="[&nbsp;&nbsp;Go&nbsp;&nbsp;]" />
<a class="Post" href="post" >

<div class = "main clearfix">
<div id = "rectsearchresults">


$fetchlast = mysql_query("SELECT * FROM posts WHERE id=(SELECT MAX(id) FROM posts)");
$lastrow = mysql_fetch_row($fetchlast);
$lastid = $lastrow[6];

for ($i=1; $i <= $lastid; $i++) {

$currentname = mysql_query("SELECT * FROM posts WHERE id=$i");

while ($row = mysql_fetch_array($currentname)) {
$title = $row[0];
$desc = $row[1];
$ID = $row[6];

$title2 = rtrim($title);
$donetitle = str_replace(" ", "-", $title2);
$url = "articles/".$ID."/".$donetitle."";

echo "<div id=\"result\"><img src=\"img/tempsmall.png\" alt = \"icon\" >
<a id=\"resultheader\" href=\"$url\">$title</a><br>







The above code is all on the same page it should display some search results. I want to be able to move the
tag with the id of
up and down. For some reason margin left works but margin top does not. I have tried using
because that was the number one solution according to web articles i read. Can someone please tell me why it doesn't work? Heres my css code:

position: relative;
margin-top: -10px;
margin-left: -0px;
background: #ffffff;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-top: 20px;

margin-bottom: 20px;
font-size: 15px;
margin-top: -20px;

Here is what I get I want the header of each result to be inline with the top of the image

enter image description here

Answer Source

<a> (anchor tags) are by default display:inline-block and

inline-block elements does not accept margin top

Many solutions exists to this:

1) Use display: table. It has the content-fitting properties of inline-block but also supports negative margins.

#resultheader {
    margin-left: 60px; //adjust to your likes
    color: black;
    font-size: 15px;
    margin-top: -30px; //adjust to your likes
    display: table;

2) Use vertical-align property

#resultheader {
    margin-left: 10px;
    color: black;
    font-size: 15px;
    vertical-align: 10px; //adjust

3) Use position: relative & top properties

    font-size: 15px;
    position: relative;
    top: -6px;

Pick your choice.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download