简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > CSS Tutorial > body text

How to set the distance of the image from the left in css

青灯夜游
Release： 2021-11-09 15:02:49
Original
7201 people have browsed it

In CSS, you can use the margin-left attribute to set the distance from the left side of the image. The function of this attribute is to set the left margin of the element. You only need to add "img{margin-left: distance value" to the image element. ;}" style is enough.

How to set the distance of the image from the left in css

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

In CSS, you can set the distance from the left side of the image through the margin-left attribute.

The margin-left attribute sets the left margin of the element. Negative values ​​are allowed.

Example:

<!DOCTYPE html>
<html>
	<head>
		<style>
			img{
				border: 1px solid red;
			}
		#img2{
			margin-left: 20px;
		}
		</style>
	</head>

	<body>
		<img  src="img/1.jpg"    style="max-width:90%" / alt="How to set the distance of the image from the left in css" >
		<img  src="img/1.jpg"    style="max-width:90%" id="img2" / alt="How to set the distance of the image from the left in css" >
	</body>
</html>
Copy after login

Rendering:

How to set the distance of the image from the left in css

Description:

margin-left attribute value Units can use px, %, em, rem, etc.

(Learning video sharing: css video tutorial)

The above is the detailed content of How to set the distance of the image from the left in css. For more information, please follow other related articles on the PHP Chinese website!

Related labels：
css
source：php.cn
Previous article：How to achieve text circular scrolling effect in css Next article：How to set the maximum height of div in css
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
WordPress 6.0 (add_editor_style) does not load style.css in Gutenberg editor I'm taking the UdemyWordPress course to create a custom WordPress block theme. I successfu...
From 2023-11-12 20:37:50
0
2
261
CSS leading zeros for decimals not working with large numbers Recently I ran into a problem where I created an ordered list with over a hundred list ite...
From 2023-11-07 10:35:53
0
1
236
Sass error: File already loaded: @import '~src/css/quasar.variables.scss', 'quasar/src/css/variables.sass'; src\css\quasar.variables.scss I'm using the quasar framework and while compiling my project I encountered the above erro...
From 2023-11-06 21:38:55
0
1
219
How to embed background video in HTML/CSS? Hi everyone, I recently encountered a problem. I'm trying to set a video background to my ...
From 2023-11-06 13:59:13
0
1
240
How to get the RGB value of CSS/HTML named color in JavaScript I have created a Javascript object called [name-rgb]. Your basic:namedColors={AliceBlue:[2...
From 2023-11-06 09:05:50
0
2
210
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！