From b5dcea43eb1d9e42283f42a6edcd52ae3208cf23 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Mon, 8 Nov 2021 00:46:41 +0900
Subject: CSS Box Model のプロパティの変換準備
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/css/margin-trim/index.md | 108 ++++++++++++++++++++++++++++++++++
 1 file changed, 108 insertions(+)
 create mode 100644 files/ja/web/css/margin-trim/index.md

(limited to 'files/ja/web/css/margin-trim/index.md')

diff --git a/files/ja/web/css/margin-trim/index.md b/files/ja/web/css/margin-trim/index.md
new file mode 100644
index 0000000000..e0b68f051a
--- /dev/null
+++ b/files/ja/web/css/margin-trim/index.md
@@ -0,0 +1,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")}}
-- 
cgit v1.2.3-54-g00ecf