CSS3ボックスモデルモジュール(邦訳)

摘要

CSS (Cascading Style Sheets) describe the rendering of documents on various media. When textual documents (e.g., HTML, WML) are laid out on visual media (e.g., screen, paper), CSS represents the elements of the document by rectangular boxes that are laid out one after the other or nested inside each other in an ordering that is called a flow. This module describes the characteristics of the flow and of the various kinds of boxes.

CSS(カスケーディング・スタイルシート)は様々なメディアでの文書の表現方法を記述する言語である。 文書の原文(例えばHTMLやWML)が視覚的なメディアのために記述されている場合、 CSSはフローと呼ばれる順序である要素の後ろに来たり、 お互いにネストしたりする矩形のボックスによって文書内の要素を表現する。 このモジュールはフローの特徴や、ボックスの種類について規定するものである。

The flow includes "floating" boxes, but tables [CSS3TBL] and "absolute" and "fixed" positioning [CSS3POS] are described in other modules. Also, the rules for partitioning a flow into pages (for paged media) is described elsewhere [CSS3PAGE], as are the special boxes for ruby annotations [CSS3RUBY] and the multicolumn layouts [CSS3COL].

フローには"浮動"ボックスも含まれる。 しかし、テーブル[CSS3TBL]と、 絶対配置や固定配置[CSS3POS]については他のモジュールにて定義される。 また、(ページドメディアの)ページ間でのフローの分割規則は[CSS3PAGE]で、 ルビ注釈の特別なボックスは[CSS3RUBY]、 マルチカラム・レイアウトは[CSS3COL]で定義される。

The box model builds on the inline text modules ([CSS3TEXT] and [CSS3LINE]), that describe how text is laid out on a line, including treatment of superscripts, bidirectional ("bidi") and vertical text.

ボックスモデルはインラインテキストモジュール([CSS3TEXT]、 [CSS3LINE])が基礎となっている。 それでは行にテキストがどのように配置されるのか定義しており、 superscriptsの扱いや、双方向("bidi")、そして縦書きテキストも含まれている。

The flow can be horizontal (typical for most languages), but in level 3 of CSS, flows can also be vertical (typical for the Uighur script and often used for ideographic scripts).

フローは(多くの言語では標準)水平方向だが、 CSSレベル3ではフローは垂直方向(ウイグル語と表意文字言語では標準)もサポートされる。

この文書の状態

This is a draft of a module of CSS level 3. It should eventually become a CSS3 Recommendation, most likely as a chapter in a larger set of modules.

これはCSS3モジュールの草案である。 やがてはCSS3勧告になるもので、おそらくモジュールの中でも大きなものである。

All the properties and features described here that also exist in CSS level 2 are intended to be backwards compatible, except in very rare cases that are explicitly marked. There is a small number of new properties, mostly to deal with vertical writing, and some properties from CSS2 have become shorthand properties for more detailed new ones in CSS3.

ここで述べる全てのプロパティとフィーチャーはCSSレベル2と後方互換があり、 異なっている部分はごく希である。 若干の新しいプロパティと、縦書きの取り扱い、 いくつかのCSS2からあるプロパティは、 CSS3でより細かい指定を行えるようにするために簡略プロパティとなったぐらいである。

This draft should not be cited except as "work in progress." It is a work item of the CSS working group which is part of the Style activity (see summary). It may be modified or dropped altogether at any point in time. Implementations for the purpose of experimenting with the specification are welcomed, as long as they are clearly marked as experimental.

この草案を"作業中"であることを明記せずに引用するべきではない。 これはスタイル作業(概要参照) のCSSワーキンググループの草案である。 この草案は更新、削除されることがあるかもしれない。 (UAが)実験目的で実装することは歓迎するが、 その実装が実験目的であることは明示しなくてはいけない。

Feedback on this draft is invited. The preferred place for discussion of this draft is the public, archived mailing list www-style@w3.org (see instructions).

この草案へのフィードバックが欲しい。 この草案についての議論は公の場で行いたい。 アーカイブ、 メーリングリストwww-style@w3.org (イントロダクション参照)。

Patent disclosures relevant to CSS may be found on the Working Group's public patent disclosure page.

CSSにとって適切な特許開示情報は、 ワーキンググループの特許開示ページにて参照できる。

To find the latest version of this working draft, please follow the "Latest version" link above, or visit the list of W3C Technical Reports.

この草案の最新バージョンは上記リンクの"最新の版"でフォローするか、 もしくはW3CTechnical Reportsのリストを参照して欲しい。

目次

• 1. 依存するモジュール
• 2. 表記方法
• 3. イントロダクション
• 4. 'display'、'display-model'、'display-role'プロパティ
  • 4.1. 通常フローレイアウトと他のフローとの混在
• 5. 'padding'プロパティ
• 6. 'border-width'プロパティ
• 7. 'margin'プロパティ
• 8. 'width'、'height'プロパティ
  • 8.1. <length>、<percentage>値
  • 8.2. <number>値
  • 8.3. 'auto'値
  • 8.4. ブロックレベル要素におけるwidth、height、marginsの制約
• 9. 'box-width'、'box-height'プロパティ(それとも'box-sizing'?)
• 10. 'min-width'、'max-width'、'min-height'、'max-height'プロパティ
• 11. 'fit'、'fit-position'プロパティ
• 12. 'crop'プロパティ
• 13. 浮動ボックス(Floating boxes)
  • 13.1. 'float'プロパティ
  • 13.2. clearプロパティ
  • 13.3. clear-afterプロパティ
  • 13.4. 'float-displace'プロパティ
• 14. 'indent-edge-reset'プロパティ
• 15. マージンの相殺(Collapsing margins)
• 16. 'overflow'プロパティ
• 17. 'overflow-x'、'overflow-y'プロパティ
• 18. marqueeプロパティ
• 19. overflow-clipプロパティ
• 20. visibilityプロパティ
• 21. 用語集
• 22. Profiles
• 23. Conformance
• Acknowledgments
• References
  • Normative references
  • Other references
• Index
• Property index

1. 依存するモジュール

This CSS3 module depends on the following other CSS3 modules:

このモジュールは次のCSS3モジュールに依存している:

• CSS3モジュール: テキスト [CSS3TEXT] — インラインボックスの生成
• Math [?]
• CSS3モジュール: 行ボックスモデル [CSS3LINE] — 行ボックスの構造と範囲、これはインラインボックスから生成される
• CSS3モジュール: 文法 [CSS3SYN]
• CSS3モジュール: 値と単位 [CSS3VAL]
• [others?]

It has non-normative (informative) references to the following other CSS3 modules:

次は標準ではないが(有益な)参考になるCSSモジュールである:

• CSS3モジュール: テーブル - テーブル内でボックスモデルがどのように変更されるか。
• CSS3モジュール: ポジショニング - 絶対配置要素内でボックスモデルがどのように変更されるか。
• CSS3モジュール: ルビ - ルビ注釈によってボックスモデルがどのように変更されるか。
• 生成テキスト、リスト
• 選択子 [SELECT]
• CSS3モジュール: ボーダー [CSS3BORDER] — 'border-width'プロパティ
• CSS3モジュール: 色 [CSS3COLOR] — 色と透過
• [others?]

2. 表記方法

Each property is introduced by a table summarizing its usage. See [where? Introduction?] for an explanation. The values 'inherit' and 'initial' are valid on all properties, but are omitted from the tables for brevity's sake. They are explained in [where? Cascading module?]

それぞれのプロパティはその使い方を要約した表で紹介している。 説明のために[イントロダクションで良いのか?]を参照。 '継承'と'初期値'の値は全てのプロパティに存在する。 しかしコンパクトにするために表から省かれている。 それらは[カスケードモジュールで良いのか?]にて説明されている。

Note that non-normative notes generally start with the word "note" and are rendered like this paragraph.

この段落のように「メモ」で始まる部分は標準ではない内容であることに注意。

3. イントロダクション

[To do: provide some examples with XHTML and "generic XML."]

[TODO: XHTMLと"一般のXML"での例が必要。]

The formatting model of CSS for visual media is based on a "flow" of rectangular boxes, that are either juxtaposed or nested, according to certain rules. There are several kinds of boxes (block boxes, inline boxes, table boxes, floating boxes,...). Properties such as 'margin' and 'float' can modify the position of a box relative to other boxes to a certain extent.

視覚メディアでのCSSのフォーマッティングモデルは、 ある規則に従って互いに並べられたり、ネストされている矩形のボックスの"フロー"が基礎となる。 それにはいくつかのボックスの種類がある(ブロックボックス、インラインボックス、 テーブルボックス、浮動ボックス等々)。 'margin'、 'float'のようなプロパティは、 ある程度他のボックスに関連してボックスの位置を変更できる。

Typically, an element in the source document corresponds to a box on the display, but sometimes an element has more than one box (e.g., a list item and its bullet, or a box that is broken over two lines), and sometimes there is no box at all (if the rendering has been suppressed with the property 'display: none'). Conversely, every box either belongs to a single element in the source, or it is an "anonymous" box that belongs to no element but is created by the rules in the style sheet (but then it indirectly belongs to the element that its parent box belongs to). This relation is important for interactive presentations, including WYSIWYG editors, because every event on a box, such as a mouse click, can unambiguously be linked to a specific element in the document source.

一般的に、ソース文書の要素が表示上のボックスと一致する。 しかし、要素が1つ以上のボックスを持つこと(例えばリスト項目と、そのマーカーや、 ボックスが2行以上に渡って分割される場合)もあるし、 ボックスが無いこと('display: none'によって生成が抑制された場合)もある。 逆に、ソース上のひとつの要素に属しているボックスがある一方で、 どの要素にも属さず、スタイルシートの規則によって生成される"匿名"ボックスもある (ただし親ボックスに属することによって、ある要素に間接的に属することにはなる)。 この関係はWYSIWYGエディタを含む、双方向のプレゼンテーションには重要である。 なぜならマウスのクリックのような全てのイベントはボックスで発生し、 明確に文書ソースの要素と詳細にリンクさせることができるからだ。

CSS level 3 supports three orientations of flows. In this module we will refer to them as horizontal, vertical-rl and vertical-lr. Horizontal flow has horizontal text and the flow grows downwards. This is the typical flow for most languages, e.g., English, Greek or Arabic. Vertical-rl flow has vertical text and the flow grows to the left. This orientation is often used in Japanese and Chinese. Vertical-lr flow also has vertical text, but the flow grows to the right ("lr" = "left to right"). This is the typical orientation for the Uighur script, one of the scripts used for Mongolian. Horizontal flow that grows upwards is not supported, and neither are diagonal flows nor complex shapes (spirals, zigzag,...). Such texts can usually be achieved with a combination of SVG [SVG10] and CSS. The orientation of a flow is set (indirectly) with the 'writing-mode' shorthand property.

CSSレベル3は3文書方向のフローをサポートしている。 このモジュール内でこれら水平フロー(horizontal)、 右からの垂直フロー(vertical-rl)、 左からの垂直フロー(vertical-lr)について説明する。 水平フローは水平方向のテキストが下方へと続く。 これは多くの言語、例えば英語、ギリシャ語、アラビア語等にとって一般的なものである。 右からの垂直(vertical-rl)フローは垂直方向のテキストが左へと続く。 この文書方向は日本語と中国語でしばしば用いられる。 左からの垂直(vertical-lr)フローもまた、 垂直方向のテキストだが、右へと続く("lr" = "left to right")。 これはウイグル語で一般的な文書方向で、モンゴル人に利用されている言語である。 水平フローは上方向へ続くものはサポートしない。 斜め方向のような複雑なフローもない(螺旋、ジグザグ。。。)。 そのようなテキストはSVG[SVG10]とCSSの連携によって実現される。 文書方向は'writing-mode'簡略プロパティで(間接的に)指定される。

Boxes have a content with a certain width and height (which can often be set explicitly with the 'width' and 'height' properties). Around that can be an optional area called the padding (the thickness of which is controlled with the 'padding' property; '0' means no padding). Around the padding can be a border (controlled by the 'border' property). Finally, boxes also have a margin around the border (specified with the 'margin' property). The outside edges of these areas are called content edge, padding edge, border edge and margin edge respectively. When we talk about the width/height of a box, we mean the width/height of the content area, unless otherwise specified.

ボックスは内容(content)と確かな幅と高さ (これは明示的に'width'と 'height'プロパティによって指定されることもある)を持つ。 その周りにはオプションの領域があり、パディング(padding)と呼ばれる (その厚さは'padding'プロパティによって指定できる。 '0'はパディングが無いことを意味する)。 パディングの周りにはボーダー(border)がある ('border'プロパティによって指定できる)。 最後にボックスはボーダーの周りにマージン(margin)を持つ ('margin'プロパティによって指定できる)。 これらの領域の外辺をそれぞれ、内容辺(content edge)、 パディング辺(padding edge)、 ボーダー辺(border edge)、 マージン辺(margin edge)と呼ぶ。 私たちがボックスの幅及び高さについて述べる場合、 特に但し書きが無い限りは内容領域の幅及び高さを意味する。

Apart from the areas and edges defined above, the text uses a number of other technical terms in the definitions of properties. Those terms are always linked to the glossary at the end of this document.

上記の領域と辺は別にして、プロパティの定義で多くの他の技術用語を使っている。 それらの用語は常にこの文書末尾の用語集へとリンクしている。

4. 'display'、'display-model'、'display-role'プロパティ

The 'display-model' property determines the algorithm with which an element lays out its children, 'display-role' specifies what role an element has in its parent's algorithm, and 'display' is a shorthand for the most common combinations of the two.

'display-model'プロパティは、 その要素がどのように子供をレイアウトするのかを決める、 'display-role'プロパティは、 親要素内でのその要素の役割を決める。 そして、'display'プロパティは、 そのふたつのプロパティの一般的な組み合わせの簡略プロパティである。

The equivalence between 'display', 'display-model' and 'display-role' is as follows:

'display'、 'display-model'、 'display-role'の関係は次のようになる:

The values of 'display-model' have the following meaning. (For ease of reading, we describe only horizontal flow.)

'display-model'の値は次のような意味である。 (読みやすさのために水平フローに限定して述べている。)

table

See the Tables module [CSS3TBL].

テーブルモジュール[CSS3TBL]参照。

ruby

See the Ruby module [CSS3RUBY].

ルビモジュール[CSS3RUBY]参照。

inline-inside

If this is not an inline-level element, the effect is the same as for 'block-inside'. Otherwise the element's inline-level children and text sequences that come before the first block-level child are rendered as additional inline boxes for the line boxes of the containing block. Ditto for the text sequences and inline-level children after the last block-level child. The other children and text sequences are rendered as for 'block-inside'.

もし、これがインライン要素ではない場合、 その効果は'block-inside'と同じである。 そうではない場合、 最初のブロックレベルの子の前に来るインラインレベルの子要素とテキストは 包含ブロックの行ボックスに追加されたインラインボックスとして表示される。 ブロックレベルの子の後のテキストとインラインレベルの子についても同上。 他の子とテキストは'block-inside'として表示される。

block-inside

Child elements are rendered as described for their 'display-role'. Sequences of inline-level elements and anonymous inline elements (ignoring elements with a display-role of 'none') are rendered as one or more line boxes. (How many line boxes depends on the line-breaking rules, see the Text module [[!CSS3-text].)

子要素はその'display-role'値によって表示される。 インラインレベル要素と 匿名インライン要素(anonymous inline elements (display-roleが'none'の要素は除く)はひとつ以上の 行ボックスによって表示される。 (いくつの行ボックスかは改行規則に依存する。テキストモジュール[[!CSS3-text]参照。)

<p>
Your <em>money</em> or your <em>life!</em>
</p>

<p>The two words <span>two words</span> appear twice in this para.</p>

p    { display-model: block-inside }
span { display-role: inline; display-model: inline-inside }

p    { display-model: block-inside }
span { display-role: inline; display-model: block-inside;
       width: 2.5em}

The values of 'display-role' have the following meaning. (Where we talk about "next element," we ignore any intervening elements with 'display-role: none'.) The descriptions assume horizontal flow for easier reading, but vertical flow is analogous.

'display-role'の値は次のような意味である。 ("次の要素"について書いている場合、'display-role: none'の要素は無視して考える。) 次の説明は簡単にするために水平フローの場合であるが、垂直フローもこれに類似している。

none

The element is not rendered. The rendering is the same as if the element had been removed from the document tree, except for possible effects on counters (see [generated] or [paged]).

その要素は表示されない。 その表示は文書ツリーからその要素が削除されたのと同じであるが、 カウンタの効果を除く([generated]もしくは[paged]参照)。

Note that :before and :after pseudo elements of this element are also not rendered, see [generated].)

この要素の:beforeと:after疑似要素もまた表示されないことに注意。 [generated]参照。

run-in

The effect depends on what comes after the element. If the next element (in the depth-first, left to right tree traversal, so not necessarily a sibling) has a 'display-model' of 'block-inside', the current element will be rendered as if it had display-role 'inline' and was the first child of that block element. Otherwise this element will be rendered as if it had display-role 'block'. [Does this explain Ian's tests?]

効果は後にくる要素に依存する。 次の要素 (その深度で、左から右へツリー移動、兄弟である必要はない) が'display-model'に'block-inside'の場合、 要素はdisplay-roleが'inline'でそのブロック要素の最初の子であるかのように表示される。 それ以外の場合、要素はdisplay-roleが'block'であるかのように表示される。 [これは イアンのテストで説明するか?]

compact

The effect depends on the intrinsic size of this element and on what comes after it. If the next element has a 'display-role' of 'block', and the intrinsic width of the compact element is less than or equal to the left margin of that block (resp. the right margin, if the block's 'direction' is 'rtl'), then the compact element is rendered in the left (right) margin of the block at its intrinsic size and baseline aligned with the first line box of the block. [Do we need a different alignment depending on script?] In all other cases the compact element is rendered as if its display-role was 'block'.

効果はその要素の内在寸法(intrinsic size)と後に来る要素に依存する。 次の要素の'display-role'が'block'の場合、コンパクト要素の内在幅はその左マージン以下である (ただし、ブロックの'direction'が'rtl'なら右マージンで考える)。 そしてコンパクト要素はそのブロックの左(右)マージンにその内在幅で、 またブロックの最初の行ボックスのベースラインにあわせて配置される。 [Do we need a different alignment depending on script?] 他の場合ねコンパクト要素はdisplay-roleが'block'であるかのように表示される。

list-item

The element is rendered the same as if it had display-role 'block', but in addition a marker is generated (see 'list-style').

要素はdisplay-roleか'block'であるかのように表示される。 ただし、マーカーを追加生成する('list-style'参照)。

block

The element is rendered as a rectangular block. See Collapsing margins for its position relative to earlier boxes in the same flow. In paged media [ref] or inside another element that has two or more columns, the box may be split into several smaller boxes.

矩形のブロックとして表示される。 同じフローの先のボックスに対する配置はマージンの相殺を参照。 ページドメディア[ref]もしくは他の2つ以上のカラムを持つ要素の内側では、 ボックスはいくつかの小さなボックスに分割されるかもしれない。

inline

The element is rendered inside a line box. It may be split into several boxes because of line breaking and bidi processing (see the Text module).

要素は行ボックス内に表示される。 これは改行や双方向テキストのために複数のボックスに分割されるかもしれない(テキストモジュール参照)。

table-...

See the Tables module [CSS3TBL].

テーブルモジュール[CSS3TBL]参照。

The computed value of 'display-role' is influenced by the 'float' property (and, in case the Positioning module [CSS3POS] is in use, also by 'position'):

'display-role'の算出値は、 'float'プロパティ (及び、ポジショニングモジュール[CSS3POS]の 'position')によって影響を受ける。

• If the computed value of 'float' is 'none', the computed value of 'display-role' is the same as the specified value.

  'float'の算出値が'none'の場合、 'display-role'の算出値は指定値と同じ。

• Otherwise, the computed value of 'display-role' is 'block', unless the specified value is 'none' or 'list-item', in which case it is the same as the specified value.

  それ以外の場合、'display-role'の算出値は'block'となる。 ただし、指定値が'none'か'list-item'のどちらかの場合、 算出値は指定値と同じになる。

[The idea here is that a list item can float and still keep its bullet. Is this useful? Or should list items turn into normal blocks when they float?]

[これはリストアイテムを浮動させてもマーカーも付いてくるというアイデアだ。 これは有用だろうか? もしくは浮動させる時に通常のブロックに戻すべきだろうか?]

(As usual, the above holds after processing 'inherit' and 'initial'.)

いつも通り、上記は処理後の'inherit'と'initial'を持つ。

[Add an elaborate illustration showing line boxes, block elements, margins between them, a marker, etc.]

[行ボックス、ブロック要素、それらのマージン、マーカー等を見せる、手の込んだイラストを追加しよう。]

<style type="text/css">
  h3 { display: run-in; margin: 1em 0 }
  h3:after { content: ". " }
  p { display: block; margin: 1em 0 }
  img { display: block; margin: 2em }
  span { display: inline-block; padding: 0.6em;
    font-size: 70%; vertical-align: middle }
</style>
<h3>First heading</h3>
<h3>Second heading</h3>
<p>This paragraph has an image that is displayed as a block:
  <img src="w3c_home" ALT="W3C">
  and also an inline-block:
  <span>
    This element<br>
    has two lines
  </span>

4.1. 通常フローレイアウトと他のフローとの混在

In document formats that combine different layout models (e.g., a document type that combines SVG with HTML in a single document), it may be necessary to introduce additional values for 'display-model', for the layout models that are not defined by CSS3. It is up to the specification of such formats to define appropriate keywords.

異なるレイアウトモデルが混在する場合(例えばSVGとHTMLがひとつの文書内にある場合等)で、 そのレイアウトモデルがCSS3で定義されているわけではない場合、 'display-model'に値が追加される必要があるかもしれない。 適当なキーワードを定義することはそのようなフォーマットの仕様次第である。

[Do we recommend a naming scheme?]

[名前スキームを推奨すべきか?]

5. 'padding'プロパティ

Sets the thickness of the padding around a box. The value may not be negative. The color/pattern of the element's background extends into the padding. See the 'background' property.

ボックス周辺のパディングの厚みを設定する。 値は負ではないかもしれない。 要素の背景の色、及びパターンはパディング領域にも広がる。 'background'プロパティを参照。

'Padding' is a shorthand that sets the four other properties at the same time. If 'padding' has 4 values, they are for top, right, bottom and left in that order. If left is omitted, it is the same as right. If bottom is omitted it is the same as top, if right is omitted it is the same as top.

'padding'は4つの他のプロパティの簡略プロパティである。 'padding'が4値を持つ場合、 それぞれ、上、右、下、左の順となる。「左」が省略された場合、それは「右」と同じ値になる。 「下」も省略された場合、「上」と同じ値になる。 「右」も省略された場合、「上」と同じ値になる。

When the padding is 0, we say that the padding is absent.

パディングが0の場合、パディングは無くなる。

Note that percentages on 'padding-top' and 'padding-bottom' are relative to the width of the containing block, not the height (at least in a horizontal flow; in a vertical flow they are relative to the height).

'padding-top'と 'padding-bottom'の パーセント値は包含ブロックのwidthが基準であり、 heightでは無いことに注意(これは水平フローの場合。垂直フローではheightを基準とする)。

6. 'border-width'プロパティ

[Move this to the Border module? For the Box model, we just need the fact that borders have a certain width, without saying how it is specified.]

[ボーダーモジュールへ移すべきか? ボックスモデルにとってはボーダーに幅があるという事実が必要である。 これ無しにどのように説明できるのだろうか。]

[Border-width doesn't allow percentages in CSS2; should we allow percentages (of the containing block's width) in CSS3?]

[border-widthはCSS2ではパーセント値が許可されていなかった。 CSS3では(包含ブロックの幅に対する)パーセント値を許可すべきだろうか?]

These properties set the thickness the border. For the style, color, etc. of the border, as well as for the 'border' shorthand property, see the Border module [CSS3BORDER].

これらのプロパティはボーダーの厚みを設定する。 ボーダーのスタイルや色、その他の指定は'border'簡略プロパティで行える。 ボーダーモジュール[CSS3BORDER]を参照。

The <border-width> can be '<length> | thin | medium | thick'. The <length> may not be negative. The lengths corresponding to 'thin', 'medium' and 'thick' are not specified, but the values are constant throughout a document and thin <= medium <= thick. A UA could, e.g., make the thickness depend on the 'medium' font size: one choice might be 1, 3 & 5px when the 'medium' font size is 17px or less.

<border-width>は'<length> | thin | medium | thick'値をとる。 <length>は負の値ではないかもしれない。 'thin'、'medium'、'thick'の長さは定義しない。 しかし、これらの値の関係は一定で、thin <= medium <= thickとなる。 UAはこれらの太さを'medium'フォントサイズに依存させることができる: 一例として、'medium'フォントサイズが17pxもしくはそれ以下の場合、1、3、5pxといった具合である。

'Border-width' is a shorthand that sets the four 'border-*-width' properties. If it has four values, they set top, right, bottom and left in that order. If left is missing, it is the same as right; if bottom is missing, it is the same as top; if right is missing, it is the same as top.

'border-width'は、 4つの'border-*-width'プロパティの簡略プロパティである。 4つの値がある場合、それらは上、右、下、左の順の意味である。 もし「左」が無い場合、「右」と同じ値をとる。 もし「下」も無い場合、「上」と同じ値をとる。 もし「右」も無い場合、「上」と同じ値をとる。

Note that the initial width is 'medium', but the initial style is 'none' and therefore the computed width is 0. See [CSS3BORDER].

幅の初期値は'medium'であるが、スタイルの初期値は'none'であり、これにより算出値がゼロになることに注意。 [CSS3BORDER]参照。

When the computed width of the border is 0, we say that the border is absent.

ボーダーの算出幅が0の場合、ボーダーは無くなる。

7. 'margin'プロパティ

These properties set the thickness of the margin. The value may be negative, but the UA may impose a lower bound.

これらのプロパティはmarginの厚さを指定する。 値は負かもしれない。 しかし、UAの実装の制限はあるかもしれない。

'Margin' is a shorthand to set top, right, bottom and left together. If four values are given, they set top, right, bottom and left in that order. If left is omitted, it is the same as right. If bottom is omitted, it is the same as top. If right is omitted it is the same as top.

'margin'は上、右、下、左を共に指定する簡略プロパティである。 もし値が4つ指定されているなら、それらは上、右、下、左の順での指定となる。 もし「左」が省略されていた場合、「右」と同じ値をとる。 もし「下」も省略されていた場合、「上」と同じ値をとる。 もし「右」も省略されていた場合、「上」と同じ値をとる。

The meaning of 'auto' on 'margin-left' '-right', '-top' and '-bottom' is as follows:

'margin-left'、'-right'、'-top'、'-bottom'に'auto'が指定されている場合の意味は次の通り:

• on floating and inline-level elements, 'auto' is equal to 0

  浮動体とインラインレベル要素の場合、 'auto'はゼロになる

• on positioned elements: see the positioning module[ref]

  配置要素の場合: ポジショニングモジュール[ref]参照

• on normal-flow elements, if the containing block is horizontal:

  通常フロー要素の場合で、 包含ブロックが水平フローの場合:

  • 'auto' on 'margin-top' and 'margin-bottom' is equal to 0

    'margin-top'と 'margin-bottom'の 'auto'はゼロになる

  • on 'margin-right' and 'margin-left': see equation (1) below

    'margin-right'と 'margin-left'の場合: 下記、equation (1)参照

• on normal-flow elements, if the containing block is vertical :

  通常フロー要素で、 包含ブロックが垂直フローの場合:

  • 'auto' on 'margin-right' and 'margin-left' is equal to 0

    'margin-right'と 'margin-left'の 'auto'はゼロになる

  • on 'margin-top' and 'margin-bottom': see equation (1) below

    'margin-top'と 'margin-bottom'の場合: 下記、equation (1)参照

Margins must satisfy certain constraints, which means that the computed value may be different from the specified value. See equation (1) below.

マージンは全体に広がらなくてはいけない。。 その意味は算出値は指定値とは違うかもしれないということである。 下記、equation (1)を参照。

Note that in a horizontal flow, percentages on 'margin-top' and 'margin-bottom' are relative to the width of the containing block, not the height (and in vertical flow, 'margin-left' and 'margin-right' are relative to the height, not the width).

水平フローにおいて、 'margin-top'と 'margin-bottom'のパーセント値は、 包含ブロックのheightではなくwidthを基準としていることに注意 (垂直フローの場合、'margin-left'と 'margin-right'はwidthではなくheightを基準とする)。

Note that 'margin-top' and 'margin-bottom' do not apply to non-replaced, inline elements (in horizontal flow); see [CSS3LINE].

'margin-top'と 'margin-bottom'は非置換インライン要素には適用されない (水平フローの場合)。 [CSS3LINE]参照。

8. 'width'、'height'プロパティ

[Idea by David Baron: add keyword values 'intrinsic' and 'min-intrinsic' to force an element to have its intrinsic or minimum width.]

[David Baronのアイデア: 要素に内在寸法、もしくはその最小値を強制する、 'intrinsic'と'min-intrinsic'のキーワード値を追加する。]

This property sets the width resp, height of the content area. The value may not be negative and in addition the UA may impose a certain lower bound.

このプロパティは内容領域の幅と高さを指定する。 この値に負の値ではないかもしれないが、UAの実装の限界があるかもしれない。

Width and height are symmetric: the role of width and height are exactly interchanged in horizontal and in vertical text. Below we explain only width; height can be derived from that by interchanging "horizontal" and "vertical."

幅と高さは対照的である。 幅と高さの役割は、横書きテキストと縦書きテキストではまさに反対に入れ替わる。 幅についてのみ述べると、 水平フローと垂直フローの変換によって高さになれる。

The computed value is normally a <length>, but in the following cases it can also be 'auto':

算出値は通常、<length>だが、 次のケースでは算出値は'auto'である:

• The computed value of 'height' is 'auto', if the specified values of both 'height' and 'box-height' are 'auto' and the element is in a horizontal flow.

  'height'と 'box-height'の指定値が 'auto'で、その要素が水平フローにある場合、 'height'の算出値は'auto'である。

• The computed value of 'width' is 'auto', if the specified value of both 'width' and 'box-width' are 'auto' and the element is in a vertical flow.

  'width'と 'box-width'の指定値が 'auto'で、要素が垂直フローにある場合、 'width'の算出値は'auto'である。

In these two cases, a specified value of 'auto' cannot be replaced by a <length> on the basis of information that is available at the start of the element, i.e., based solely on the width and height of preceding elements and ancestors.

これらのふたつのケースにおいて、 'auto'の指定値は要素の開始位置で入手できる情報を基にして <length>で置換することはできない。 つまり、前の要素や祖先要素の幅と高さを基準とする。

8.1. <length>、<percentage>値

A <percentage> is relative to the computed value of the width or height of the containing block, but if that value is 'auto' the computed value for the percentage is also 'auto'.

<percentage>は包含ブロックの幅もしくは高さの算出値を基にする。 しかしこれらの値が'auto'なら、パーセント値の算出値もまた'auto'になる。

Note: when 'width' or 'height' is set to a value other than 'auto' on a replaced element, the size of content area is set to that value and the content may be scaled or otherwise deformed to fit the area; see "the 'auto' value" below. If both 'width' and 'height' are set, the scaling may even be different in the two directions; see the 'fit' property.

メモ: 置換要素の'width' もしくは'height'が 'auto'以外の値の時、 その内容領域のサイズをその値にし、内容はその領域にフィットするように拡大・縮小、 もしくは変形するかもしれない。 以下の"'auto'値"参照。 'width'と 'height'が共に設定されている場合、 その拡大・縮小方法はふたつの方向で違うかもしれない。 'fit'プロパティを参照。

8.2. <number>値

A <number> value sets the width or height to that many times the intrinsic width resp. height of the element. [It is only defined for replaced elements?] The computed value is the result of that multiplication (a <length>) [or is it the number? does it matter?].

<number>値を幅もしくは高さに指定すると、 それはその要素の内在寸法の幅及び高さの倍数となる。 [これは置換要素に対してのみの定義とする?] 算出値は(<length>との)乗算の結果である。 [もしくは実数?それは重要か?]

If a replaced element does not have an intrinsic size, the computed value is UA dependent?

置換要素が内在寸法を持たない場合、算出値はUA依存とするのか?

img {width: 50px}  /* 50pxの幅 */
img {width: 50%}   /* 包含ブロックの幅の半分 */
img {width: 50em}  /* 50×当該要素のフォントサイズ */
img {width: auto}  /* 内在寸法 */
img {width: 1}     /* 同上。つまり、内在寸法 */
img {width: 0.5}   /* 内在幅の半分 */

Note that <number> does not exist in CSS level 2.

<number>はCSSレベル2には存在しなかったことに注意。

8.3. 'auto'値

We describe the meaning of 'auto' on elements that have horizontal flow. Vertical flow is analogous, but with the roles of 'width' and 'height' interchanged.

水平フローの要素での'auto'の意味について説明しよう。 垂直フローの場合も似ているが、 'width'と 'height'の役割が入れ替わることになる。

For replaced elements there are two cases. (1) Both width and height are 'auto': in this case both are set to the intrinsic size. (2) Only one of the two is 'auto': in this case 'auto' is computed as the size that keeps the aspect ratio the same, i.e., width : height = intrinsic-width : intrinsic-height. If the intrinsic width or height is zero, the element is not scaled and the computed value of 'auto' is the intrinsic size. If the element does not have an intrinsic size and no aspect ratio either, the computed value is UA dependent.

置換要素にはふたつのケースがある。 (1)幅と高さの両方が'auto'の場合: このケースでは共に内在寸法となる。 (2)ふたつのうち、ひとつだけに'auto'が指定されている場合: このケースの'auto'は同じアスペクト比を保つサイズを算出する。 つまり、幅 : 高さ = 内在幅 : 内在高 となるようにする。 固有幅もしくは高さがゼロの場合、その要素は拡大・縮小されず、 'auto'の算出値は内在寸法となる。 もし要素が内在寸法もアスペクト比も持たない場合、算出値はUA依存となる。

For non-replaced elements, 'auto' on 'height' is always the intrinsic height that corresponds to the element's computed width. The computed value of 'auto' on 'width' depends on the type of box:

非置換要素では、'height'の 'auto'は常に要素の算出された幅から求められる 内在高になる。 'width'の 'auto'の算出値はボックスのタイプに依存する:

1. If the element is a flow root other than the root element, width is the intrinsic width.

   要素がルート要素(root element)以外の フロールート(flow root)の場合、 幅は内在幅になる。

2. If the element is the root element on paged media, the value is the computed width value of the 'size' property.

   要素がページドメディアでルート要素であれば、 その値は'size'プロパティの算出幅である。

3. Otherwise, if the element is a block-level element and its containing block also has a horizontal flow, equation (1) below determines the width.

   それ以外の場合、要素がブロックレベル要素で、 その包含ブロックもまた 水平フローならば、 下記のequation (1)で決めた幅になる。

4. Otherwise, if the element is block-level and the containing block has a different orientation, the computed value is the intrinsic width.

   それ以外の場合、要素がブロックレベル要素で包含ブロックが異なる 文書方向の場合、 算出値は内在幅となる。

5. Otherwise (i.e., the element is positioned, is a table element or a ruby), see the positioning [CSS3POS], table [CSS3TBL] or ruby [CSS3RUBY] modules.

   それ以外の場合(例えば、配置要素であったり、テーブル要素、もしくはルビ等)は ポジショニング[CSS3POS]、 テーブル[CSS3TBL]、 ルビ[CSS3RUBY]モジュールを参照。

Note that in CSS2, floating elements (case 1) were given a certain small, UA-dependent width, but in CSS3 they are given their intrinsic width (often referred to as "shrink-wrapped").

CSS2では浮動要素(ケース1)は本当に小さいサイズか、UA依存の幅が設定されたが、 CSS3ではその内在幅を設定する。 (しばしば"適当縮小"(shrink-wrapped)として参照された)。

8.4. ブロックレベル要素におけるwidth、height、marginsの制約

For block-level elements with horizontal flow in a containing block also with horizontal flow, the computed values of the 'width' and margins must satisfy this constraint:

水平フローのブロックレベル要素で、 その包含ブロックもまた水平フローの場合、 'width'の算出値とマージンは以下の等式を成立させなくてはいけない:

(1)

(width of containing block) = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

(包含ブロックの幅) = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

The following cases can occur:

次のケースがある:

1. None of width, margin-left and margin-right are specified as 'auto' and the values satisfy the constraint.

   width、margin-left、margin-right全ての指定値が'auto'ではなく、等式が成立している場合。

2. None of width, margin-left or margin-right was specified as 'auto' and the equation is not satisfied. There are two sub-cases: (1) if the 'direction' of the element is 'ltr', the specified value of 'margin-right' is ignored and 'margin-right' is set to the value that makes the equation true; (2) if 'direction' is 'rtl', it is 'margin-left' that is ignored and computed from the equation.

   width、margin-left、margin-rightの指定値が'auto'ではなく、等式が成立していない場合。 これにはふたつのサブケースがある: (1) 要素の'direction'が 'ltr'の場合、 'margin-right'の指定値は無視され、 'margin-right'には等式を成立させる値が設定される。 (2) 'direction'が 'rtl'の場合、 'margin-left'は等式を成立させるために無視される。

3. If exactly one of width, margin-left or margin-right is 'auto', its value is computed from the equation.

   width、margin-leftもしくはmargin-rightのうちにひとつが'auto'の場合、 その値は等式が成立するように算出される。

4. If width and one or both margins are 'auto', the margins that are 'auto' are set to 0 and the equation is solved for width.

   widthと片方、もしくは両方のマージンが'auto'の場合、マージンは共に'auto'となり、 更にそれらはゼロと算出され、widthによって等式を成立させる。

5. If both margin-left and margin-right are 'auto', the equation is solved under the extra constraint that margin-left = margin-right.

   margin-leftとmargin-rightが共に'auto'の場合、 margin-left = margin-rightとなるように等式を成立させる。

   この項目を単独で読むと、誤解してしまう表現になっていますが、 margin-left = margin-rightを成立させてセンタリングさせるためには、 widthに'auto'値以外が指定されている必要があります(内在寸法を持たない要素の場合)。 そのことはひとつ手前の項目で暗示されていることに注意してください。

If, after solving the equation, width has a value that is smaller than 'min-width', the computed value of 'width' is set to the computed value of 'min-width' and the constraint is evaluated again as if width had been specified with this value.

もし等式を解いた後にwidth値が'min-width'より小さい場合は、 'width'の算出値を'min-width'とし、 その値がwidthの指定値であるものとして等式を再計算する。

If, after solving the equation, width has a value that is larger than both 'max-width' and 'min-width', the computed value of 'width' is set to the larger of 'max-width' and 'min-width' and the constraint is evaluated again as if 'width' had been specified with this value.

もし等式を解いた後にwidthの値が'max-width'と 'min-width'より大きい場合、 'width'の算出値は、 'max-width'と 'min-width'の大きい方の値を設定し、 その値が'width'の指定値であるものとして等式を再計算する。

BLOCKQUOTE {
    width: 30em;
    margin-left: auto;
    margin-right: auto }

Block-level elements with a vertical flow inside a containing block with a vertical flow are analogous, but with a constraint on height and margin-top/margin-bottom:

垂直フローの包含ブロック内の垂直フローのブロックレベル要素も似ているが、 等式はheightとmargin-top、margin-bottomで作られる。

(2)

(height of containing block) = margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom

(包含ブロックの高さ) = margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom

9. 'box-width'、'box-height'プロパティ(それとも'box-sizing'?)

'Box-width' and 'box-height', if not set to 'auto', override 'width' and 'height' respectively. They set the width/height from border-edge to border-edge. I.e., 'box-width: X' is equivalent to setting 'width: (X - padding-left - border-left - padding-right - border-right)'

'Box-width'と 'box-height'が 'auto'以外であれば、 'width'もしくは 'height'をオーバーライドする。 これらはボーダー辺からボーダー辺までの幅もしくは高さを指定する。 例えば'box-width: X'は 'width: (X - padding-left - border-left - padding-right - border-right)'となるように設定される。

BUTTON { box-width: 10% }

The computed value is either the specified <length>, or the result of adding the relevant padding to the computed value of 'width' or 'height', except that if the computed value of 'width' resp. 'height' is 'auto', then so is 'box-width' resp. 'box-height'.

算出値は指定値の<length>か、 パディングを考慮した'width'もしくは、 'height'との算出値である。 しかし'width'と 'height'の算出値が 'auto'の場合は異なり、 その時は'box-width'、 'box-height'の値になる。

Yet another possibility: Introducing simple expressions can also solve the same problem, but in a different way: BUTTON { border: 2px solid; width: 10% - 2 * 2px }

もうひとつの可能性: 単純な表現の異なる方法で同じ問題を解決できる: BUTTON { border: 2px solid; width: 10% - 2 * 2px }

And yet another idea is to create a pseudo-element ':container' that represents a second box that every box has around itself: BUTTON:container {width: 10%}. Indeed, the ':container' could have borders, padding and margins as well, and maybe even another ':container' around itself, but then cascading would suffer.

他のアイデアは疑似要素':container'を作ることだ。 これはボックスの周囲に2番目のボックスを作り: BUTTON:container {width: 10%}で実現するものだ。 まあ、':container'はボーダーとパディングとマージンを持ち、 ':container'を自身の更に外側にも持ちうるが、カスケードは大変だろう。

10. 'min-width'、'max-width'、'min-height'、'max-height'プロパティ

Set the maximum width and height of an element's content area. 'Auto' means there is no maximum.

要素の内容領域の最大幅と最大高を設定する。 'auto'は最大値は無しという意味である。

Set the minimum width and height of an element's content area.

要素の内容領域の最小幅と最小高を設定する。

'Min-width' overrides 'max-width', and both override 'width', in case any of them conflict. Analogous for 'min-height', 'max-height' and 'height'

'min-width'は 'max-width'や、 'width'と衝突する場合はこれらをオーバーライドする。 'min-height'、 'max-height'、 'height'の場合も同様である。

11. 'fit'、'fit-position'プロパティ

[This section should move to the "Generated & Replaced Content" module.]

[このセクションは生成・置換内容モジュールに移動するべきだ。]

The 'fit' property gives a hint for how to scale a replaced element if neither its 'width' nor its 'height' property is 'auto'. Not all replaced objects can be scaled, but images typically can.

'fit'プロパティは置換要素の 'width'も、 'height'も'auto'では無い場合に、 内容をどのように拡大縮小すればよいのかを指定する。 全ての置換オブジェクトが拡大縮小できるわけではないが、画像は一般的にできる。

fill

Scale the object's height and width independently so that the content just touches all edges of the width × height box.

オブジェクトの高さと幅を独立して拡大縮小させ、 内容がwidth × heightのボックスの辺一杯になるようにする。

none

Do not scale the object.

オブジェクトを拡大縮小しない。

meet

Make the object as large as possible with its width <= 'width' and height <= 'height', while preserving its aspect ratio. Position the object as for 'hidden'.

オブジェクトを幅 <= 'width'、 高さ <= 'height'の範囲で、 可能な限り大きくし、アスペクト比を維持する。 オブジェクトの位置は'hidden'と同様。

slice

Make the object as small as possible with its width >= 'width' and height >= 'height', while preserving its aspect ratio. Position the object as for 'hidden'. See 'overflow' for how to render the parts that stick out of the box.

オブジェクトを幅 >= 'width'、 高さ >= 'height'の範囲で、 可能な限り小さくし、アスペクト比を維持する。 オブジェクトの位置は'hidden'と同様。 ボックスからはみだした部分の表示方法については'overflow'参照。

See the 'overflow' property for what happens to parts of the object that stick out of the box.

'overflow'プロパティ参照。 これはオブジェクトのボックスからはみ出した部分をどうするのかを決めるプロパティである。

The keywords are intended to convey the visual effect in the case that 'overflow' is 'hidden', which is expected to be the most common case.

これらのキーワードは'overflow'が 'hidden'の場合の表示結果であることを意図している。 なぜならそれが最も一般的な事例だと考えているからだ。

The 'fit-position' determines the alignment of the object inside the box. The values have the same meaning as the values on 'background-position', with the addition of the value 'auto', specifically:

'fit-position'プロパティは ボックス内でのオブジェクトの位置を決める。 値は'background-position'と同じ意味であり、 それに加えて'auto'値がある:

<percentage> <percentage>

With a value pair of '0% 0%', the upper left corner of the image is aligned with the upper left corner of the box's padding edge. A value pair of '100% 100%' places the lower right corner of the image in the lower right corner of padding area. With a value pair of '14% 84%', the point 14% across and 84% down the image is to be placed at the point 14% across and 84% down the padding area.

'0% 0%'のペアの場合、画像の左上の角がボックスのパディング辺の左上の角に配置される。 '100% 100%'なら画像の右下の角がパディング領域の右下の角に配置される。 '14% 84%'なら、画像の横14%、上から84%の位置がパディング領域の横14%、上から84%の位置に配置される。

<length> <length>

With a value pair of '2cm 2cm', the upper left corner of the image is placed 2cm to the right and 2cm below the upper left corner of the padding area.

'2cm 2cm'であれば、画像の左上の角がパディング領域の左から2cm、上から2cmの位置に配置される。

'top left', 'left top'

Same as '0% 0%'.

'0% 0%'と同じ。

'top', 'top center', 'center top'

Same as '50% 0%'.

'50% 0%'と同じ。

'right top', 'top right'

Same as '100% 0%'.

'100% 0%'と同じ。

'left', 'left center', 'center left'

Same as '0% 50%'.

'0% 50%'と同じ。

'center', 'center center'

Same as '50% 50%'.

'50% 50%'と同じ。

'right', 'right center', 'center right'

Same as '100% 50%'.

'100% 50%'と同じ。

'bottom left', 'left bottom'

Same as '0% 100%'.

'0% 100%'と同じ。

'bottom', 'bottom center', 'center bottom'

Same as '50% 100%'.

'50% 100%'と同じ。

'bottom right', 'right bottom'

Same as '100% 100%'.

'100% 100%'と同じ。

'auto'

Put one of the object's corners in the corresponding corner of the box, depending on the element's 'writing-mode':

オブジェクトの角のひとつをボックスの対応する角に置く。 これは要素の'writing-mode'に依存する。

writing-mode	角
lr-tb	top left
rl-tb	top right
tb-rl	top right
tb-lr	top left
bt-rl	bottom right
bt-lr	bottom left

The computed value is the same as the specified value, i.e., the keywords are not replaced by percentages and the percentages are not replaced by something else. (This is an exception to the general rule that percentages are computed to some other value before being inherited.)

算出値は指定値と同じで、例えばキーワードはパーセント値に置換されないし、 パーセント値も他の値に置換されない。 (これは本来、パーセント値は他の値に継承される前に計算されることに対する例外である。)

Note: these properties do not exist in CSS2.

これらのプロパティはCSS2には存在しなかった。

Note that areas of the box not covered by the replaced element will show the element's 'background'.

置換要素で覆われないボックスの領域では、 要素の'background'が見えているだろう。

Note: the 'fit' property has the same meaning as the fit attribute in [SMIL10], except that the value "scroll" is not available, because the 'overflow' property can be used instead.

メモ: 'fit'プロパティは、 [SMIL10]の fit属性と同じ意味だが、 "scroll"値が使えない点が異なる。 なぜなら'overflow'プロパティをその代わりに使えるからである。

12. 'crop'プロパティ

[This section should move to the "Generated & Replaced Content" module.]

[このセクションは生成・置換内容モジュールに移動するべきだ。]

Do we want this? Or should people just copy the image and cut it before sending it to a browser?

Call 'none' 'auto' instead? That's what it's called in 'clip'.

This property allows a replaced element to be just a rectangular area of an object, instead of the whole object.

The 'crop' property adds a step when determining the intrinsic width and height of an element. With 'crop' the notion of computed intrinsic width and height are introduced. When the layout algorithms reference the "intrinsic width" (and/or height), they are referring to the computed intrinsic width and height.

The computed intrinsic width and height of an element are the result of applying the crop to the actual intrinsic width and height of the element.

'auto'

The element's computed intrinsic width and height are the same as its actual intrinsic width and height.

rect(top, right, bottom, left)

Each of the four arguments can be a <length> or a <percentage>. All percentage values are computed relative to the intrinsic dimensions of the element. Values are offsets relative to the top left of the element. The computed intrinsic width and height of the element are determined by subtracting the left from the right for the width, and similarly top from bottom for the height. However, if this computation results in a negative value, it is considered to be zero.

inset-rect(top, right, bottom, left)

Like rect(), except that the values are offsets relative to the respective edges of the element.

If the element does not have an intrinsic width, the UA may in some cases be able to infer the intrinsic width that the style sheet writer assumed. First the UA must find the computed 'width' and computed 'height' and then the intrinsic width can be found as follows (the intrinsic height is analogous):

1. If 'crop' is 'auto', the assumed intrinsic width is the same as the computed value of 'width'
2. If 'crop' is 'rect(t, r, b, l)' and r is a percentage, the intrinsic width can be solved from the equation: r = computed 'width' + l
3. If 'crop' is 'rect(t, r, b, l)' and r is not a percentage, the intrinsic width cannot be computed and the result is UA dependent.
4. If 'crop' is 'inset-rect(t, r, b, l)', then the intrinsic width can always be solved from the equation intrinsic width = l + computed 'width' + r

Note: 'crop' does not impact the scaling, stretching, tiling or positioning of the replaced element. 'crop' simply allows the author to essentially use a part of a replaced element in place of the element itself for all intents and purposes. For control over scaling, stretching and positioning, please see the 'fit', 'fit-position' and 'position' properties.

<p>Here is Woolly, the CSS sheep:
<img src="woolly" alt="Woolly">
<p>And here he is as a thumbnail:
<img src="woolly" alt="Woolly thumbnail"
  style="crop: rect(0px, 115px, 85px, 30px)">

13. 浮動ボックス(Floating boxes)

A float is a box that creates a new flow, while the parent flow wraps around it. The 'float' property determines where the box is positioned relative to the parent flow: left or right (for horizontal flows), top or bottom (for vertical flows)

浮動するボックスは新しいフローを作り出し、 親フローはその周りに回り込む。 'float'プロパティは、 ボックスが親フローの中での相対配置を決定する: leftもしくはright(水平フローの場合)、topもしくはbottom(垂直フローの場合)

IMG.icon { 
  float: left;
  margin-left: 0;
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Float example</TITLE>
    <STYLE type="text/css">
      IMG { float: left }
      BODY, P, IMG { margin: 2em }
    </STYLE>
  </HEAD>
  <BODY>
    <P><IMG src=img.gif alt="This image will illustrate floats">
       Some sample text that has no other...
  </BODY>
</HTML>

<BODY>
  <P>Some sample text 
  <IMG src=image.gif alt="This image will illustrate floats">
           that has no other...
</BODY>

13.1. 'float'プロパティ

The values have the following meanings:

値は次の意味を持つ:

left, top

If the containing block has horizontal flow: the element generates a box that is floated to the left. Content flows on the right side of the box, starting at the top (subject to the 'clear' property). If the containing block has vertical flow the box is floated to the top and content flows on the bottom side of the box (subject to the 'clear' property).

包含ブロックが 水平フローの場合: 要素が生成したボックスは左へと浮動する。 内容はそのボックスの右側へとフローし、 その上端からスタートする ('clear'による)。 包含ブロックが 垂直フローの場合、 ボックスは上へと浮動し、内容はボックスの下へフローする ('clear'による)。

Note: for readability it is recommended to use 'left' in style sheets for horizontal flow and 'top' for vertical flow.

メモ: 可読性のために水平フローのスタイルシートでは'left'を、 垂直フローでは'top'を使うことを推奨する。

It would be more intuitive (less surprising) if 'left' only worked in horizontal flow and 'top' only in vertical flow.

'left'は水平フローでのみ、'top'は垂直フローでのみなら、 もっと直感的だろう(困惑しない)。

right, bottom

Analogous to 'left', but content flows on the left side, respectively the top side of the box.

'left'と似ているが、 内容はボックスの左側、上側にそれぞれフローする。

inside

Same effect as 'left' or 'right' depending on whether the float will appears on a right, resp. left page in paged media. Same as 'left' on non-paged media. (See the Paged media module [ref] for information on left/right pages.)

ページドメディアで、右、左のページそれぞれに、 'left'もしくは'right'と同じように現れるだろう。 非ページドメディアでは'left'と同じである。 (左右のページについての情報はページドメディアモジュール参照[ref])

outside

Same effect as 'right' or 'left' depending on whether the float will appears on a right, resp. left page in paged media. Same as 'right' on non-paged media.

ページドメディアで、右、左のページそれぞれに、 'right'もしくは'left'と同じように現れるだろう。 非ページドメディアでは'right'と同じである。

start

Same effect as either 'left', 'right', 'top' or 'bottom, depending on the 'direction' of the containing block, as follows:

'left'、'right'、'top'、'bottom'と同じ効果である。 ただし、包含ブロックの'direction'に依存し、次のようになる:

'direction'	効果
ltr	left/top
rtl	right/bottom

end

Same effect as either 'left', 'right', 'top' or 'bottom', depending on the 'direction' of the co