blob: e0b68f051a17111c654601f70b1a715443d8a111 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
|
---
title: margin-trim
slug: Web/CSS/margin-trim
tags:
- CSS
- CSS Property
- Draft
- Experimental
- NeedsContent
- NeedsExample
- NeedsLiveSample
- Reference
- recipe:css-property
browser-compat: css.properties.margin-trim
translation_of: Web/CSS/margin-trim
---
{{CSSRef}}
The `margin-trim` property allows the container to trim the margins of its children where they adjoin the container’s edges.
## Syntax
```css
margin-trim: none;
margin-trim: in-flow;
margin-trim: all;
/* Global values */
margin-trim: inherit;
margin-trim: initial;
margin-trim: revert;
margin-trim: unset;
```
## Values
- `none`
- : Margins are not trimmed by the container.
- `in-flow`
- : For in-flow boxes contained by this box, block-axis margins adjacent to the box's edges are truncated to zero.
It also truncates any margins collapsed with such a margin.
- `all`
- : Trims the margins of in-flow boxes and floats whose margins coincide with the container's content edge.
## Formal definition
{{cssinfo}}
## Formal syntax
{{csssyntax}}
## Examples
### Basic usage
Once support is implemented for this property, it will probably work like so:
When you've got a container with some inline children and you want to put a margin between each child but not have it interfere with the spacing at the end of the row, you might do something like this:
```css
article {
background-color: red;
margin: 20px;
padding: 20px;
display: inline-block;
}
article > span {
background-color: black;
color: white;
text-align: center;
padding: 10px;
margin-right: 20px;
}
```
The problem here is that you'd end up with 20px too much spacing at the right of the row, so you'd maybe do this to fix it:
```css
span:last-child {
margin-right: 0;
}
```
It is a pain having to write another rule to achieve this, and it is also not very flexible. Instead, `margin-trim` could fix it:
```css
article {
margin-trim: in-flow;
...
}
```
## Specifications
{{Specifications}}
## Browser compatibility
{{Compat}}
## See also
- {{CSSxRef("margin")}}
|
