The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> Auto margin in CSS
Shervan
post Sep 1 2023, 10:34 AM
Post #1





Group: Members
Posts: 2
Joined: 5-August 23
Member No.: 29,003
Hello,

When I set margin-left: auto;, why the image push to the right-hand side?


CODE

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>

<body>
    <div class="imgClass">
<img src="images/flower.jfif"/>
</div>
</body>

</html>


CODE
.imgClass {
    display: block;
    width: 200px;
margin-left: auto;
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
 
 Reply to this topicStart new topic
Replies
Christian J
post Sep 2 2023, 06:15 PM
Post #2


.
********

Group: WDG Moderators
Posts: 9,665
Joined: 10-August 06
Member No.: 7
Most of them, it seems. Just from a quick glance:

QUOTE
10.3.1 Inline, non-replaced elements
The 'width' property does not apply. A computed value of 'auto' for 'margin-left' or 'margin-right' becomes a used value of '0'.

10.3.2 Inline, replaced elements
A computed value of 'auto' for 'margin-left' or 'margin-right' becomes a used value of '0'.

10.3.5 Floating, non-replaced elements
If 'margin-left', or 'margin-right' are computed as 'auto', their used value is '0'.

10.3.6 Floating, replaced elements
If 'margin-left' or 'margin-right' are computed as 'auto', their used value is '0'.

10.3.9 'Inline-block', non-replaced elements in normal flow
...
A computed value of 'auto' for 'margin-left' or 'margin-right' becomes a used value of '0'.

Maybe W3C could show it in a table. smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Posts in this topic
Shervan   Auto margin in CSS   Sep 1 2023, 10:34 AM
Christian J   It's the DIV, not the IMG. This is described i...   Sep 1 2023, 11:46 AM
pandy   I wasn't aware of this behavior. I guess I...   Sep 1 2023, 06:48 PM
Christian J   I wasn't aware of this behavior. I guess I...   Sep 1 2023, 07:57 PM
pandy   Don't know. Never understood the theory behind...   Sep 2 2023, 12:02 PM
Christian J   But in some cases "auto" becomes zero: h...   Sep 2 2023, 02:01 PM
pandy   What situation? That's a long page...   Sep 2 2023, 04:22 PM
Christian J   Most of them, it seems. Just from a quick glance: ...   Sep 2 2023, 06:15 PM

« Next Oldest · Cascading Style Sheets · Next Newest »
 

Reply to this topicStart new topic
3 User(s) are reading this topic (3 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Switch to: Standard · Switch to: Linear+ · Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 16th May 2024 - 01:53 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC