All geek questions in one place

CSS Bottom of the element

<body> ...other stuff... <div style="width: 30px; margin-left: 500px; bottom: 0px;"> <img src="picture.png"> </div> </body>

margin-left works. I can’t understand why the picture will not stick to the bottom.

+4
source share
4 answers

For bottom , to be effective, you will also need to use position for relative or absolute :

 <div style="position:absolute; width: 30px; margin-left: 500px; bottom: 0"> <img src="picture.png"> </div>

Use an absolute or relative position depending on your layout requirements.

Note. With position you can use left , right and top .

+4
source

You must explicitly place the element in order to use the bottom property:

For absolutely positioned fields, this property indicates how far the extreme edge of the bottom field of the box is offset above the lower edge of the filling of its containing block.

For relatively positioned fields, this property indicates how far the extreme edge of the field is offset above the position that it would have in a normal flow.

DEMO - source

+3
source

The element does not have a position rule for bottom . quirksmode contains a good article on CSS positioning.

+1
source

I think you are looking for something like this.

 <div style="width: 30px; margin-left: 500px;"> <img src="picture.png" style='display: block;'> </div>

By default, img has some space below, located above the source text. This is not margin or indentation. The most common way to change this is to set the image display to lock.

0
source

Source: https://habr.com/ru/post/1398447/

More articles:


All Articles