Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Minor: Guide update #33906

Merged
merged 3 commits into from
Jun 4, 2024
Merged

Minor: Guide update #33906

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
02f6524
Minor: Guide update
estelle Jun 4, 2024
15fd454
Update files/en-us/web/css/css_logical_properties_and_values/margins_…
teoli2003 Jun 4, 2024
fa53a4a
Fix table MD
teoli2003 Jun 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
90 changes: 45 additions & 45 deletions ...n-us/web/css/css_logical_properties_and_values/margins_borders_padding/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,46 +6,46 @@ page-type: guide

{{CSSRef}}

The [Logical Properties and Values specification](https://drafts.csswg.org/css-logical/) defines flow-relative mappings for the various margin, border, and padding properties and their shorthands. In this guide, we take a look at these.
The [CSS logical properties and values](/en-US/docs/Web/CSS/CSS_logical_properties_and_values) module defines flow-relative mappings for the various margin, border, and padding properties and their shorthands. In this guide, we take a look at these.

If you have looked at the main page for the [CSS logical properties and values](/en-US/docs/Web/CSS/CSS_logical_properties_and_values) module, you will see there are a huge number of properties listed. This is mostly because there are four longhand values each for margin, border, and padding side, plus all the shorthand values.
If you look at the [logical properties and values](/en-US/docs/Web/CSS/CSS_logical_properties_and_values) module, you may notice the list of module properties is very long. This is mostly because there are four longhand values each for margin, border, and padding side, plus all the shorthand values.

## Mappings for margins, borders, and padding

The specification details mappings for each logical value to a physical counterpart. In the table below I have given these mapped values assuming that the {{cssxref("writing-mode")}} in use is `horizontal-tb` — with a left to right direction. The inline direction therefore runs horizontally — left to right — and {{cssxref("margin-inline-start")}} would be equivalent to {{cssxref("margin-left")}}.
The module details mappings for each logical value to a physical counterpart. The table below maps these values for when the {{cssxref("writing-mode")}} is `horizontal-tb` — with a left to right direction. The inline direction therefore runs horizontally — left to right — and {{cssxref("margin-inline-start")}} would be equivalent to {{cssxref("margin-left")}}.

If you were using a `horizontal-tb` writing mode with a right-to-left text direction then {{cssxref("margin-inline-start")}} would be the same as {{cssxref("margin-right")}}, and in a vertical writing mode it would be the same as using {{cssxref("margin-top")}}.

| Logical property | Physical Property |
| ---------------------------------------- | ----------------------------------------- |
| {{cssxref("border-block-end")}} | {{cssxref("border-bottom")}} |
| {{cssxref("border-block-end-color")}} | {{cssxref("border-bottom-color")}} |
| {{cssxref("border-block-end-style")}} | {{cssxref("border-bottom-style")}} |
| {{cssxref("border-block-end-width")}} | {{cssxref("border-bottom-width")}} |
| {{cssxref("border-block-start")}} | {{cssxref("border-top")}} |
| {{cssxref("border-block-start-color")}} | {{cssxref("border-top-color")}} |
| {{cssxref("border-block-start-style")}} | {{cssxref("border-top-style")}} |
| {{cssxref("border-block-start-width")}} | {{cssxref("border-top-width")}} |
| {{cssxref("border-inline-end")}} | {{cssxref("border-right")}} |
| {{cssxref("border-inline-end-color")}} | {{cssxref("border-right-color")}} |
| {{cssxref("border-inline-end-style")}} | {{cssxref("border-right-style")}} |
| {{cssxref("border-inline-end-width")}} | {{cssxref("border-right-width")}} |
| {{cssxref("border-inline-start")}} | {{cssxref("border-left")}} |
| {{cssxref("border-inline-start-color")}} | {{cssxref("border-left-color")}} |
| {{cssxref("border-inline-start-style")}} | {{cssxref("border-left-style")}} |
| {{cssxref("border-inline-start-width")}} | {{cssxref("border-left-width")}} |
| {{cssxref("border-start-start-radius")}} | {{cssxref("border-top-left-radius")}} |
| {{cssxref("border-end-start-radius")}} | {{cssxref("border-bottom-left-radius")}} |
| {{cssxref("border-start-end-radius")}} | {{cssxref("border-top-right-radius")}} |
| {{cssxref("border-end-end-radius")}} | {{cssxref("border-bottom-right-radius")}} |
| {{cssxref("margin-block-end")}} | {{cssxref("margin-bottom")}} |
| {{cssxref("margin-block-start")}} | {{cssxref("margin-top")}} |
| {{cssxref("margin-inline-end")}} | {{cssxref("margin-right")}} |
| {{cssxref("margin-inline-start")}} | {{cssxref("margin-left")}} |
| {{cssxref("padding-block-end")}} | {{cssxref("padding-bottom")}} |
| {{cssxref("padding-block-start")}} | {{cssxref("padding-top")}} |
| {{cssxref("padding-inline-end")}} | {{cssxref("padding-right")}} |
| {{cssxref("padding-inline-start")}} | {{cssxref("padding-left")}} |
| {{glossary("Logical properties","Logical property")}} | {{glossary("Physical properties", "Physical property")}} |
| ----------------------------------------------------- | -------------------------------------------------------- |
| {{cssxref("border-block-end")}} | {{cssxref("border-bottom")}} |
| {{cssxref("border-block-end-color")}} | {{cssxref("border-bottom-color")}} |
| {{cssxref("border-block-end-style")}} | {{cssxref("border-bottom-style")}} |
| {{cssxref("border-block-end-width")}} | {{cssxref("border-bottom-width")}} |
| {{cssxref("border-block-start")}} | {{cssxref("border-top")}} |
| {{cssxref("border-block-start-color")}} | {{cssxref("border-top-color")}} |
| {{cssxref("border-block-start-style")}} | {{cssxref("border-top-style")}} |
| {{cssxref("border-block-start-width")}} | {{cssxref("border-top-width")}} |
| {{cssxref("border-inline-end")}} | {{cssxref("border-right")}} |
| {{cssxref("border-inline-end-color")}} | {{cssxref("border-right-color")}} |
| {{cssxref("border-inline-end-style")}} | {{cssxref("border-right-style")}} |
| {{cssxref("border-inline-end-width")}} | {{cssxref("border-right-width")}} |
| {{cssxref("border-inline-start")}} | {{cssxref("border-left")}} |
| {{cssxref("border-inline-start-color")}} | {{cssxref("border-left-color")}} |
| {{cssxref("border-inline-start-style")}} | {{cssxref("border-left-style")}} |
| {{cssxref("border-inline-start-width")}} | {{cssxref("border-left-width")}} |
| {{cssxref("border-start-start-radius")}} | {{cssxref("border-top-left-radius")}} |
| {{cssxref("border-end-start-radius")}} | {{cssxref("border-bottom-left-radius")}} |
| {{cssxref("border-start-end-radius")}} | {{cssxref("border-top-right-radius")}} |
| {{cssxref("border-end-end-radius")}} | {{cssxref("border-bottom-right-radius")}} |
| {{cssxref("margin-block-end")}} | {{cssxref("margin-bottom")}} |
| {{cssxref("margin-block-start")}} | {{cssxref("margin-top")}} |
| {{cssxref("margin-inline-end")}} | {{cssxref("margin-right")}} |
| {{cssxref("margin-inline-start")}} | {{cssxref("margin-left")}} |
| {{cssxref("padding-block-end")}} | {{cssxref("padding-bottom")}} |
| {{cssxref("padding-block-start")}} | {{cssxref("padding-top")}} |
| {{cssxref("padding-inline-end")}} | {{cssxref("padding-right")}} |
| {{cssxref("padding-inline-start")}} | {{cssxref("padding-left")}} |

There are also some additional shorthands, made possible because we can target both block or both inline edges of the box simultaneously. These shorthands have no physical equivalent.

Expand All @@ -68,19 +68,19 @@ There are also some additional shorthands, made possible because we can target b

The mapped margin properties of {{cssxref("margin-inline-start")}}, {{cssxref("margin-inline-end")}}, {{cssxref("margin-block-start")}}, and {{cssxref("margin-inline-end")}} can be used instead of their physical counterparts.

In the example below I have created two boxes and added different sized margins to each edge. I have added an extra container with a border to make the margin more obvious to see.
This example has two boxes with different sized margins to each edge. An extra container with a border has been included to make the margin more apparent.

One box uses physical properties and the other logical properties. Try changing the {{cssxref("direction")}} property to `rtl` to cause the boxes to display in a right-to-left direction, the margins on the first box will stay in the same place, while the margins on the inline dimension of the second box will switch.
One box uses physical properties and the other logical properties. Try changing the {{cssxref("direction")}} property to `rtl` to cause the boxes to display in a right-to-left direction; the margins on the first box will stay in the same place, while the margins on the inline dimension of the second box will switch.

You can also try changing the `writing-mode` from `horizontal-tb` to `vertical-rl`. Again, notice how the margins stay in the same place for the first box, but switch around to follow the text direction in the second.
Also try changing the `writing-mode` from `horizontal-tb` to `vertical-rl`. Notice how the margins stay in the same place for the first box, but switch around to follow the text direction in the second.

{{EmbedGHLiveSample("css-examples/logical/margin-longhands.html", '100%', 700)}}

### Margin shorthands

As we can now target both sides of a box — either both inline sides or both block sides — there are new shorthands available, {{cssxref("margin-inline")}} and {{cssxref("margin-block")}}, which accept two values. The first value will apply to the start of that dimension, the second to the end. If you only use one value it is applied to both.
There are shorthands available to target either both the inline sides or both the block sides, {{cssxref("margin-inline")}} and {{cssxref("margin-block")}} respectively. Each accepts two values. The first value will apply to the start of that dimension, the second to the end. If only one value is set, it is applied to both.

In a horizontal writing mode this CSS would apply a 5px margin to the top of the box and a 10px margin to the bottom.
In a horizontal writing mode this CSS would apply a `5px` margin to the top of the box and a `10px` margin to the bottom.

```css
.box {
Expand All @@ -92,7 +92,7 @@ In a horizontal writing mode this CSS would apply a 5px margin to the top of the

The mapped padding properties of {{cssxref("padding-inline-start")}}, {{cssxref("padding-inline-end")}}, {{cssxref("padding-block-start")}}, and {{cssxref("padding-inline-end")}} can be used instead of their physical counterparts.

In the example below I have two boxes, one of which is using physical padding properties and the other logical padding properties. With a `writing-mode` of `horizontal-tb`, both boxes should appear the same.
In this example, there are two boxes. One has physical padding properties set and the other uses logical padding properties. With a `writing-mode` of `horizontal-tb`, both boxes should appear the same.

Try changing the `direction` property to `rtl` to cause the boxes to display in a right-to-left direction. The padding on the first box will stay in the same place, whereas the padding on the inline dimension of the second box will switch.

Expand All @@ -104,7 +104,7 @@ You can also try changing the `writing-mode` from `horizontal-tb` to `vertical-r

As with margin, there are two-value shorthands for padding — {{cssxref("padding-inline")}} and {{cssxref("padding-block")}} — which allow you to set the padding of the two inline, and two block dimensions, respectively.

In a horizontal `writing-mode` this CSS would apply `5px` of padding to the top of the box and 10px of padding to the bottom:
In a horizontal `writing-mode`, this CSS would apply `5px` of padding to the top of the box and `10px` of padding to the bottom:

```css
.box {
Expand All @@ -114,15 +114,15 @@ In a horizontal `writing-mode` this CSS would apply `5px` of padding to the top

## Border examples

The border properties are the main reason that Logical Properties and Values seems to have so many properties, as we have the longhands for the color, width, and style of the border on each side of a box, along with the shorthand to set all three at once for each side. As with margin and padding we have a mapped version of each physical property.
The border properties are the main reason that this module seems to have so many properties, as it provides longhand logical properties for the color, width, and style of the border on each side of a box, along with the shorthand to set all three at once for each side. As with margin and padding, there is a mapped version of each physical property.

The demo below uses some longhands and three shorthand values. As with the other demos try changing the `direction` property to `rtl` to cause the boxes to display in a right-to-left direction, or changing the `writing-mode` from `horizontal-tb` to `vertical-rl`.
The demo below uses some longhands and three shorthand values. As with the other demos, try changing the `direction` property to `rtl` to cause the boxes to display in a right-to-left direction, or changing the `writing-mode` from `horizontal-tb` to `vertical-rl`.

{{EmbedGHLiveSample("css-examples/logical/border-longhands.html", '100%', 700)}}

### New border shorthands
### Border shorthands

There are two-value shorthands to set the width, style, and color of the block or inline dimension, and shorthands to set all three values in the block or inline dimension. The below code, in a horizontal writing mode, would give you a 2px green solid border on the top and bottom of the box, and a 4px dotted purple border on the left and right.
There are two-value shorthands to set the width, style, and color of the block or inline dimension, and shorthands to set all three values in the block or inline dimension. The below code, in a horizontal writing mode, would give you a `2px green solid` border on the top and bottom of the box, and a `4px dotted purple` border on the left and right.

```css
.box {
Expand All @@ -135,7 +135,7 @@ There are two-value shorthands to set the width, style, and color of the block o

### Flow relative border-radius properties

The specification has flow-relative equivalents for the {{cssxref("border-radius")}} longhands. The below example, in a horizontal `writing-mode`, would set the top-right border radius to 1em, the bottom-right to 0, the bottom-left to 20px and the top-left to 40px.
The module has flow-relative equivalents for the {{cssxref("border-radius")}} longhands. The below example, in a horizontal `writing-mode`, would set the top-right border radius to `1em`, the bottom-right to `0`, the bottom-left to `20px` and the top-left to `40px`.

```css
.box {
Expand Down