How do i move my image around my webpage? – Html

HTML objects snap to the top right of a page and cascade down, similar to writing in Microsoft Word. If you want to move an object down, you have to give it margin-top. If you want to move it to the right, you have to give it margin-left. This pushes the object down within the parent element, or to the right within the parent element.

There are hundreds of significantly better ways to do this though. Just like in Microsoft Word, objects on a page hold space. If you push an object down with margin, every object that comes after it will go below that object. If you push it to the right, none of the other objects will move to the right, but they will populate directly underneath the object in question.

Margin and padding are two different types of spacing properties. Margin pushes an object away from other things, while padding adds space to the object. You can think of this in a very silly metaphor I’ve used a lot over the years: margin is social distancing and padding is a big puffy coat you’re wearing. Just like someone standing in line, you can move yourself away from the person in front of you by using social distancing (margin) and taking a step back. You can also ask the person behind you to take a step back. What you can’t do is tell the person in front of you to scoot forward. With margin, you can push an object down or push objects that come after it away from them. If you want to understand left and right margin better, imagine this line is for a concert and it wraps around the side of the building. Your left shoulder is touching the building. You can choose to step further away from the left side of the building, but if you try to social distance from anything on the right, nothing will happen because nothing is there.

With margin on the left, you can push the object further to the right, but adding margin to the right won’t do anything unless there is another object in line beside you.

Now padding is that big fluffy jacket. You can put on a huge, giant fluffy Michelin Man jacket, and people won’t come into the space that the jacket takes up. It also makes you larger, though. You can have both social distancing AND a giant puffy jacket, or just the puffy jacket, or just social distancing. They will keep other people in line away from you just fine, neither one is better or worse than the other so long as they create the same amount of space between you and other people in line. That being said, the way other things affect you will change. For example, if someone were to dump a bucket of paint on you, it would take more paint to cover you if you’re wearing a fluffy jacket than it would if you weren’t wearing a puffy jacket.

In this part of the metaphor, if you put a background-color on the object with padding, both the spacing you’ve created with padding and the object itself will be colored by the styling.

So, all of that is to say, you probably don’t want to use margin and padding to move your object around. Instead, you’re probably going to want to use position.

Position: absolute is like turning you into a ghost in the line metaphor. You no longer hold a spot in the line, the people behind you will step forward and take your place, and you have the freedom to go all the way to the front of the line because nothing is holding you back. Even if you do go all the way to the front, though, you won’t move the person who’s first in line back at all, because you’re a ghost. Now the reason you’re still in line at all is because the line has position: relative on it, meaning your placement is relative to the line you’re in. If you put a large cardboard box in the line that had position: relative on it, then you’d be a ghost in the box, but the box would hold your place in line.

Position: absolute; allows you to take an object out of the flow of objects, but it no longer has the ability to hold its own space. You have to tell it where to go by using top: [value]; bottom: [value]; left: [value]; right: [value];. You only need to use top OR bottom and left OR right unless you’re trying to center something. Each of those style attributes takes a value, either a static value like 10px or a relative value like percent (%). If you say, top: 10px; right: 50%; left: 50%; then your position:absolute; object will be down 10px from the top of the relative container and centered horizontally within it.

.margin-parent, .padding-parent, .position-parent {
width: 200px; 
height: 200px;

background: wheat;
border: 1px solid blue;
}

.margin-elem {
width: 40px;
height: 40px;
margin-top: 40px;
margin-left: 40px;

background: pink;
border: 1px solid red;
}

.padding-elem {
width: 40px;
height: 40px;
padding-top: 40px;
padding-left: 40px;

background: pink;
border: 1px solid red;
}

.position-parent {
position: relative;
}

.position-elem, .position-sibling {
width: 80px;
height: 80px;

border: 1px solid red;
}

.position-elem {
position: absolute;
top: 40px;
left: 40px;

background: rgba(255, 0, 0, 0.3); /* transparent red */
}
.position-sibling {
background: rgba(0, 0, 255, 0.3); /* transparent blue */
}

<div class="margin-parent">
  <div class="margin-elem"></div>
</div>

<div class="padding-parent">
  <div class="padding-elem"></div>
</div>

<div class="position-parent">
  <div class="position-elem"></div>
  <div class="position-sibling"></div>
</div>

There are other ways to do this, but it really depends on what’s going on elsewhere in your page. For example, if you’d like to use flexbox, you can do so but it wouldn’t make sense to use just to put one object on the bottom of your page.

You can use position: fixed; if you’d like the object to stay in one place on the page while you scroll, like the navigation bar does on Stack Overflow (scroll up and down and the searchbar stays in the same place, that’s position:fixed;)

Oh, also you can use position: absolute on multiple elements.