php echo html - margin-left is not working

Question

Well, in a .php file I echo some html (like a template) for every result (from search input):

while ($row = mysqli_fetch_array($result))
{
  //image
  echo "<img id=" . '"' . "myImg" . '"' . "src=" . '"' . "showImage.php?image=" . $row['shortcutImage'] . '"' . "class=" . '"' . "imageList" .'"' . ">";
  //title
  echo "<h5 class=" . '"' ."titleResult" . '"' . ">".  $row['name_now'] . "</h5>";
  //area
  echo "<p class=" . '"'. "areaResult" . '"' . ">" . "Περιοχή: " . $row['area'] . "</p>";

  //break between results
  echo "<br>";
  echo "<br>";
}

and the style

imageList is for image
titleResult is for the <h5>
areaResult for <p>


    .imageList{
            margin-top: 10px;
            clear: both;
            width:100%;
            max-width:250px;
            float: left;
        }
        .titleResult{
            color: rgb(17, 17, 17);
            font-weight: 500;
            margin-left: 35px;
            margin-top: 20px;
        }
        .areaResult{
            margin-top: 35px;
        }

and of course the output I have: (Images names and area is tests)

Alexander van Oostenrijk Alexander van Oostenrijk · Accepted Answer · 2018-08-02T14:49:53

The margin-left you specify for your h5 element is not taken from the right edge of the image, but from the edge of the viewport (or whatever element these elements are in). If you want the margin to be from the edge of the image, you'll have to add the image width of 250px to it. This happens because you have made your img a floating element.

It would be wise to place each set of image, header and area text in a div so you can do your margin measurements from that context. That way, you can also get rid of the br elements used for vertical spacing and use CSS instead.

For instance, you could do:

<div style="padding-left:280px; padding-bottom: 40px">
  <img src="..." style="float:left">
  <h5>Title</h5>
  <p>Area</p>
</div>

php echo html - margin-left is not working

1 Answers