diff options
author | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2021-11-08 00:46:41 +0900 |
---|---|---|
committer | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2021-11-15 23:58:38 +0900 |
commit | b5dcea43eb1d9e42283f42a6edcd52ae3208cf23 (patch) | |
tree | d69d318b0e9c37aa7dda168d10b2611d5c9349d5 | |
parent | fb72298beae301c207efc5efd288438cc4e76410 (diff) | |
download | translated-content-b5dcea43eb1d9e42283f42a6edcd52ae3208cf23.tar.gz translated-content-b5dcea43eb1d9e42283f42a6edcd52ae3208cf23.tar.bz2 translated-content-b5dcea43eb1d9e42283f42a6edcd52ae3208cf23.zip |
CSS Box Model のプロパティの変換準備
-rw-r--r-- | files/ja/web/css/margin-bottom/index.md (renamed from files/ja/web/css/margin-bottom/index.html) | 0 | ||||
-rw-r--r-- | files/ja/web/css/margin-left/index.md (renamed from files/ja/web/css/margin-left/index.html) | 0 | ||||
-rw-r--r-- | files/ja/web/css/margin-right/index.md (renamed from files/ja/web/css/margin-right/index.html) | 0 | ||||
-rw-r--r-- | files/ja/web/css/margin-top/index.md (renamed from files/ja/web/css/margin-top/index.html) | 0 | ||||
-rw-r--r-- | files/ja/web/css/margin-trim/index.md | 108 | ||||
-rw-r--r-- | files/ja/web/css/margin/index.md (renamed from files/ja/web/css/margin/index.html) | 0 | ||||
-rw-r--r-- | files/ja/web/css/padding-bottom/index.md (renamed from files/ja/web/css/padding-bottom/index.html) | 0 | ||||
-rw-r--r-- | files/ja/web/css/padding-left/index.md (renamed from files/ja/web/css/padding-left/index.html) | 0 | ||||
-rw-r--r-- | files/ja/web/css/padding-right/index.md (renamed from files/ja/web/css/padding-right/index.html) | 0 | ||||
-rw-r--r-- | files/ja/web/css/padding-top/index.md (renamed from files/ja/web/css/padding-top/index.html) | 0 | ||||
-rw-r--r-- | files/ja/web/css/padding/index.md (renamed from files/ja/web/css/padding/index.html) | 0 |
11 files changed, 108 insertions, 0 deletions
diff --git a/files/ja/web/css/margin-bottom/index.html b/files/ja/web/css/margin-bottom/index.md index f035539d6b..f035539d6b 100644 --- a/files/ja/web/css/margin-bottom/index.html +++ b/files/ja/web/css/margin-bottom/index.md diff --git a/files/ja/web/css/margin-left/index.html b/files/ja/web/css/margin-left/index.md index 029fd44321..029fd44321 100644 --- a/files/ja/web/css/margin-left/index.html +++ b/files/ja/web/css/margin-left/index.md diff --git a/files/ja/web/css/margin-right/index.html b/files/ja/web/css/margin-right/index.md index 4eaaef539f..4eaaef539f 100644 --- a/files/ja/web/css/margin-right/index.html +++ b/files/ja/web/css/margin-right/index.md diff --git a/files/ja/web/css/margin-top/index.html b/files/ja/web/css/margin-top/index.md index fa48d0b5eb..fa48d0b5eb 100644 --- a/files/ja/web/css/margin-top/index.html +++ b/files/ja/web/css/margin-top/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")}} diff --git a/files/ja/web/css/margin/index.html b/files/ja/web/css/margin/index.md index e8e2379d73..e8e2379d73 100644 --- a/files/ja/web/css/margin/index.html +++ b/files/ja/web/css/margin/index.md diff --git a/files/ja/web/css/padding-bottom/index.html b/files/ja/web/css/padding-bottom/index.md index 8aa21ff9bb..8aa21ff9bb 100644 --- a/files/ja/web/css/padding-bottom/index.html +++ b/files/ja/web/css/padding-bottom/index.md diff --git a/files/ja/web/css/padding-left/index.html b/files/ja/web/css/padding-left/index.md index 589c502943..589c502943 100644 --- a/files/ja/web/css/padding-left/index.html +++ b/files/ja/web/css/padding-left/index.md diff --git a/files/ja/web/css/padding-right/index.html b/files/ja/web/css/padding-right/index.md index 85d9486bba..85d9486bba 100644 --- a/files/ja/web/css/padding-right/index.html +++ b/files/ja/web/css/padding-right/index.md diff --git a/files/ja/web/css/padding-top/index.html b/files/ja/web/css/padding-top/index.md index 365db61701..365db61701 100644 --- a/files/ja/web/css/padding-top/index.html +++ b/files/ja/web/css/padding-top/index.md diff --git a/files/ja/web/css/padding/index.html b/files/ja/web/css/padding/index.md index 4f75859c83..4f75859c83 100644 --- a/files/ja/web/css/padding/index.html +++ b/files/ja/web/css/padding/index.md |