CSS margin-trim: Interactive Margin Collapse Visualizer
Prompt
Create an interactive visualizer that demonstrates the CSS margin-trim property, showing how it trims margins of child elements within a container to prevent unwanted spacing. Include toggle controls to switch between margin-trim modes (none, block, block-start, block-end, inline, inline-start, inline-end) and visualize the effect on nested elements with different margin values.
CODE PREVIEW
AIとの対話に追加する一言
プロンプトと一緒にコピーして、AIがより正確に意図を汲み取れるようにします
このコードをそのまま使いたいので、CDNリンクも含めた完全なHTMLファイルとして出力してください。
初心者なので、各行にコメントを追加して、何をしているか説明してください。
このコードをWordPressのテーマに組み込む方法も教えてください。
動作確認済みのコードをお願いします。エラーが出る場合の対処法も含めて。
CSSのmargin-trimプロパティは、コンテナがその子要素のマージンを、コンテナの端に接する部分でトリミングすることを可能にします。これにより、マージンの相殺によって発生する不要な間隔を排除できます。
このインタラクティブなデモでは、さまざまなmargin-trimモードを試すことができます：
- none: マージンのトリミングなし（デフォルト）
- block: block-startとblock-endの両方の端でマージンをトリミング
- block-start: block-start端のみでマージンをトリミング
- block-end: block-end端のみでマージンをトリミング
- inline: inline-startとinline-endの両方の端でマージンをトリミング
- inline-start: inline-start端のみでマージンをトリミング
- inline-end: inline-end端のみでマージンをトリミング
スライダーを使用して子要素のマージンを調整し、margin-trimがレイアウトにどのように影響するかを観察してください。最初と最後の子要素のマージンが、コンテナの端に接するときにどのようにトリミングされるかに注目してください。
Prompt Overview
The margin-trim property in CSS allows a container to trim the margins of its children where they adjoin the container's edges. This helps eliminate unwanted spacing that occurs due to margin collapsing.
In this interactive demo, you can experiment with different margin-trim modes:
- none: No margin trimming (default)
- block: Trim margins on both block-start and block-end edges
- block-start: Trim margins on the block-start edge only
- block-end: Trim margins on the block-end edge only
- inline: Trim margins on both inline-start and inline-end edges
- inline-start: Trim margins on the inline-start edge only
- inline-end: Trim margins on the inline-end edge only
Use the slider to adjust child element margins and observe how margin-trim affects the layout. Notice how the first and last children's margins are trimmed when they touch the container's edges.
Was this prompt helpful?
Comments
Comments appear after moderation
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選