I suppose I'm slightly confused on which picture you're trying to move, as well as where you're actually trying to move it to. I'm sorry for the confusion, just trying to clarify.

It also might be beneficial to state how you're writing the website. Are you using vanilla HTML? Are you using a framework like Bootstrap or Foundation? Are you using a pre-built editor? These might be helpful pieces of information.

Try and use Padding. That will give it a border from the edge of the white box.. If thats what you're trying to do

Margin's wouldn't be the correct way.

Bootstrap containers col-md-6 with a offset or a padding of about 20px

That's probably your best bet mate

Royal_Stance wrote Margin's wouldn't be the correct way.

Bootstrap containers col-md-6 with a offset or a padding of about 20px

That's probably your best bet mate

Please don't recommend bootstrap advice unless the person is using bootstrap - which I'm doubtful about; which is a good thing.

@OP - Paddings and box-sizing: border-box; is what you need.

Truthfully we can't make a valid, helpful suggestion until we know more about the basis of the creation. Padding would push the photo, but we don't know what photo he wants to move or where he wants move it. If he's using bootstrap it's an easy fix.

Royal_Stance wrote Bootstrap containers col-md-6 with a offset or a padding of about 20px

Not sure why this was voting as not useful judging by the fact that it is enormously useful... exactly what he needs to do, actually lol

If you used Bootstrap to create your website - which I doubt - you could use the grid layout classes as someone else mentioned before. The grid layout classes are: .col-xs, .col-sm, .col-md and .col-lg. These classes also have numbers after them, from 1 to 12: .col-md-4, etc. There are offsets, too: .col-md-offset-2, .col-xs-offset-2, etc. You can read more about the grid layout, [ Register or Signin to view external links. ] .

Personally, I think if you wish to move an image anywhere, you use margins. If you want to move something freely, you must give it position: absolute OR relative then give it the top, left, bottom and right property values in CSS.

If it's the small image you are trying to move to the bottom of the container, you could do this:



You must give the image (<img />) an id of 'special' for it to obtain the correct CSS properties/styles.
What I have done is made the image relative to the container it is in, moved it to the very bottom at the left side. Then I have applied a pseudo-selector to give it a margin of 20px to the left, pushing it away from the left side of the page, to the right. You can read upon pseudo-selectors [ Register or Signin to view external links. ] .

Psst.. Pseudo-selectors are also known as pseudo-classes and elements.

EDIT: I'm not a fan of writing code on TTG and I highly recommend going to StackOverflow for programming needs.

If you would like to keep the object inline with the rest of the page and you want to move the image just a little bit use this:

Click to View Content


Your image selector {margin-left: 100px; margin-top: 100px;}


or you could do


Your image selector {margin: 100px 0 0 100px} <-exact same thing



If you would like to position the image freely but still be able to affect other objects' position use this:

Click to View Content


your image selector {position: absolute; margin-left: 100px; margin-top: 100px;}


or since it is absolute you could use left right bottom or top
this will set the distance between the side you choose


your image selector {position: absolute; left: 100px; top: 100px;}


Finally if you want your element to be positioned freely, not be able to push around other elements, and not be able to scroll with the page then use this:

Click to View Content

your image selector {position: fixed; left: 100px; top: 100px;}

or this

your image selector {position: fixed; margin-left: 100px; margin-top: 100px;}

anyways what ever you do don't use padding to push things around the page.
padding might look like it is pushing it but it is actually adding onto the width or height of the element.
This will make it extremely difficult to arrange things later on.

if you are still having trouble I suggest you view these pages.
[ Register or Signin to view external links. ]
[ Register or Signin to view external links. ]


finally if nothing is still working and you know there are zero typos then type important after your code
but I don't recommend it because you can't override important later on.

Click to View Content

your image selector {position: fixed; margin-left: 100px !important; margin-top: 100px;}