このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

<mpadded>

Baseline 広く利用可能 *

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2023年1月以降、すべてのブラウザーで利用可能です。

* この機能の一部は、対応レベルが異なる場合があります。

<mpadded>MathML の要素で、余白を追加したり、囲まれたコンテンツの位置やサイズの全体的な調整を設定したりするために使用します。。

属性

この要素の属性には、MathML のグローバル属性に加え、以下の属性があります。

depth

<length-percentage> で、この <mpadded> 要素の(ベースラインからの)理想的な深さを示します。

height

<length-percentage> で、この <mpadded> 要素の理想的な高さ(ベースラインより上)を示します。

lspace

<length-percentage> で、この <mpadded> 要素の位置決め点を基準として、子コンテンツの位置決め点の水平方向の位置を示します。

voffset

<length-percentage> で、この <mpadded> 要素の位置決め点を基準として、子コンテンツの位置決め点の垂直方向の位置を示します。

width

<length-percentage> で、この <mpadded> 要素の理想的な水平方向の長さを示します。

古い構文

depthheightlspacevoffsetwidth 属性については、一部のブラウザーでは、代わりに次のようなより複雑な構文を受け入れることがあります。

  1. 接頭辞としてオプションで + または - 記号を指定し、対応する軸の値を増加または減少させます(指定がない場合、対応する軸に指定された値が直接設定されます)。
  2. <unsigned-number>(以下 α と呼ぶ)が続きます。
  3. 必要に応じて、値が続きます(値が指定されていない場合、指定された値は「α の 100 倍パーセント」と解釈されます)。
    • 単位。指定された値は、古い MathML の長さ と同様に解釈されます。
    • 名前空間定数。指定された値は、α 倍の定数として解釈されます。
    • 擬似単位 widthheightdepth のいずれか。指定された値は、コンテンツの対応するサイズの α 倍として解釈されます。
    • パーセント記号の後に、擬似単位 widthheightdepth のいずれかが続くもの。指定された値は、コンテンツの対応するサイズの α% として解釈されます。

軸とオフセット

html
<math display="block">
  <mpadded width="400px" height="5em" depth="4em" lspace="300px" voffset="-2em">
    <mi>x</mi>
    <mo>+</mo>
    <mi>y</mi>
  </mpadded>
</math>
css
mpadded {
  background: lightblue;
}

古い構文

html
<math display="block">
  <!-- 長さを加算 -->
  <mpadded width="+20px">
    <mtext>+20px</mtext>
  </mpadded>

  <!-- 擬似単位に設定 -->
  <mpadded width="2width">
    <mtext>2width</mtext>
  </mpadded>

  <!-- 擬似単位のパーセントを加算 -->
  <mpadded width="+400%height">
    <mtext>+400%height</mtext>
  </mpadded>

  <!-- 名前空間の倍数まで減らす -->
  <mpadded width="-1thickmathspace">
    <mtext>-1thickmathspace</mtext>
  </mpadded>
</math>
css
mpadded:nth-child(1) {
  background: lightblue;
}
mpadded:nth-child(2) {
  background: lightgreen;
}
mpadded:nth-child(3) {
  background: lightyellow;
}
mpadded:nth-child(4) {
  background: pink;
}

技術的概要

暗黙の ARIA ロール なし

仕様書

仕様書
MathML Core
# adjust-space-around-content-mpadded

ブラウザーの互換性

関連情報