How to move images down with css

Using CSS to move the image downward can be achieved through the margin attribute, where the margin-bottom value determines the distance the image moves downward, which can be a pixel value or a percentage value.

How to use CSS to move the image downward

To use CSS to move the image downward, you can usemargin attribute.

margin attribute

margin attribute is used to add white space around an element. It has four values, specified in clockwise order:

• margin-top: The empty space at the top edge
• margin-right: Empty space on the right edge
• margin-bottom： Empty space on the bottom edge
• margin-left： Empty space on the left edge

You can use the following syntax to specify the value of the margin attribute:

<code class="css">margin: <top-value> <right-value> <bottom-value> <left-value>;</code>

Let the image move down

To make the Moving the image downward can increase the value of margin-bottom. The syntax is as follows:

<code class="css">img {
  margin-bottom: <value>;
}</code>

<value> Can be a pixel value (e.g. "10px") or a percentage value (e.g. "10%").

Example

The following code will move all images on the page down 20 pixels:

<code class="css">img {
  margin-bottom: 20px;
}</code>

You can also use negative values ​​to move images down Move up. For example, the following code will move all images on the page up 10 pixels:

<code class="css">img {
  margin-bottom: -10px;
}</code>

The above is the detailed content of How to move images down with css. For more information, please follow other related articles on the PHP Chinese website!