Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Cascading Style Sheets _ Auto margin in CSS

Posted by: Shervan Sep 1 2023, 10:34 AM

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;
}

Posted by: Christian J Sep 1 2023, 11:46 AM

It's the DIV, not the IMG. This is described in a very cryptic way at https://www.w3.org/TR/CSS22/visudet.html#Computing_widths_and_margins where I believe https://www.w3.org/TR/CSS22/visudet.html#blockwidth 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).

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.

Posted by: pandy Sep 1 2023, 06:48 PM

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?

Posted by: Christian J Sep 1 2023, 07:57 PM

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?

Posted by: pandy Sep 2 2023, 12:02 PM

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.

Posted by: Christian J Sep 2 2023, 02:01 PM

But in some cases "auto" becomes zero: https://www.w3.org/TR/CSS22/visudet.html#Computing_widths_and_margins as if they use the "auto" value as a kind of catch-all for various situations.

Posted by: pandy Sep 2 2023, 04:22 PM

What situation? That's a long page...

Posted by: Christian J Sep 2 2023, 06:15 PM

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.