CODEWITHSUNDEEP
htmlcss
Friendly Fella
Friendly Fella

Reputation: 75

How to move an image upwards in html/css


I'm quite new to HTML and I wanted to have an image in my page, but when I use <hr> to separate it from other stuff they cross each other. So I want to move my image up a little. Here's the code I've been using:

<html dir="rtl"> <body> ... <img src="20161125_041749.jpg" alt="my pic" style= "width: 108px; height: 130px; float:left;" ... </div> </body> </html>

I'm not using <head> nor <style> tags.
I've been trying to use position:relative;top:-10px; ,but I can't figure out how to use it or it has some problem with the "float". Coud anyone please help me what to do?
Thanks in advance and Thanks to all who have tried to solve it so far...

Upvotes: 5

Views: 19390

Answers (3)

Alfred Xing
Alfred Xing

Reputation: 4632

This root issue (that the image and <hr> cross each other) sounds like a clearfix problem.

When you have a floating element, it may appear to "overlap" non-floating elements:

#float {
  width: 100px;
  height: 100px;
  background: red;
  float: right;
}

hr {
  border: 4px solid blue;
}
<div id="float"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id auctor tellus. In hac habitasse platea dictumst</p>
<hr>

But instead of trying to just move the float up, you might want to add clear: both to your <hr>:

#float {
  width: 100px;
  height: 100px;
  background: red;
  float: right;
}

hr {
  border: 4px solid blue;
  clear: both;
}
<div id="float"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id auctor tellus. In hac habitasse platea dictumst</p>
<hr>

Upvotes: 1

ADH - THE TECHIE GUY
ADH - THE TECHIE GUY

Reputation: 4403

change the value of top as you needed 

#img{
  position: relative;
  top:-10px;
  }
<img src="https://i.sstatic.net/W1bSf.jpg" alt="my pic" style= "width: 108px; height: 130px; float:left;" id="img">

Upvotes: 3

Amit Kumar Pawar
Amit Kumar Pawar

Reputation: 3330

<img src="20161125_041749.jpg" alt="my pic" style= "width: 108px; height: 130px; float:left;margin-bottom:5px">

margin-bottom:5px; will work fine or you can change values according to your need

or provide demo code for better view

Upvotes: 0

Related Questions