The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> 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
Christian J
post Sep 1 2023, 11:46 AM
Post #2


.
********

Group: WDG Moderators
Posts: 9,661
Joined: 10-August 06
Member No.: 7
It's the DIV, not the IMG. This is described in a very cryptic way at https://www.w3.org/TR/CSS22/visudet.html#Co...ths_and_margins where I believe 10.3.3 Block-level, non-replaced elements in normal flow applies to a DIV with specified width. From that section, is suppose this rule applies:

"If there is exactly one value specified as 'auto', its used value follows from the equality."


I assume "equality" means the width of the containing block (BODY in this case), minus 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' (that are all zero in this case, except the width). unsure.gif

Since the unspecified margin-right defaults to its initial value (zero), I guess the left auto margin is allowed to fill up the entire width of the parent container (minus the DIVs own width), and as result the DIV is pushed to the right side.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 1 2023, 06:48 PM
Post #3


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,732
Joined: 9-August 06
Member No.: 6
I wasn't aware of this behavior. I guess I've never tried it.


Shervan, what did you hope to accomplish? What is it you want to do?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Sep 1 2023, 07:57 PM
Post #4


.
********

Group: WDG Moderators
Posts: 9,661
Joined: 10-August 06
Member No.: 7
QUOTE(pandy @ Sep 2 2023, 01:48 AM) *

I wasn't aware of this behavior. I guess I've never tried it.

Maybe it's the same principle as centering content with both left and right auto margins:

CODE
div {
width: 200px;
margin-left: auto;
margin-right: auto;
background: lime;
}

but then the two margins will only get half of the "equality" each? unsure.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 2 2023, 12:02 PM
Post #5


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,732
Joined: 9-August 06
Member No.: 6
Don't know. Never understood the theory behind that either, just learnt how it it works. Maybe it should have been called margin: max. Because that seems to be how it works, take everything that's available.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Sep 2 2023, 02:01 PM
Post #6


.
********

Group: WDG Moderators
Posts: 9,661
Joined: 10-August 06
Member No.: 7
But in some cases "auto" becomes zero: https://www.w3.org/TR/CSS22/visudet.html#Co...ths_and_margins as if they use the "auto" value as a kind of catch-all for various situations. unsure.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 2 2023, 04:22 PM
Post #7


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,732
Joined: 9-August 06
Member No.: 6
What situation? That's a long page...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Sep 2 2023, 06:15 PM
Post #8


.
********

Group: WDG Moderators
Posts: 9,661
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
« Next Oldest · Cascading Style Sheets · Next Newest »
 

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

 

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

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

- Lo-Fi Version Time is now: 27th April 2024 - 04:05 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC