キャンバスが内容を超えてスクロールするのはなぜですか?余分な空白を修正するにはどうすればよいですか?

キャンバスのスクロール オーバーフロー: 空白の問題の解決

div 内でキャンバスを使用し、スクロール機能を適用すると、一般的に空白が発生します。キャンバスの下部に表示され、スクロールがキャンバスのコンテンツを超えて拡張されます。この問題に対処するには、次の解決策を検討してください。

キャンバスをブロック要素にする

デフォルトでは、キャンバスは画像と同様にインライン要素です。インライン要素には垂直方向のスペースがあることが多いため、垂直方向の配置によって空白の問題が発生する可能性があります。これを解決するには、キャンバスの表示プロパティを「block」に変更して、ブロックレベルの要素にします。

更新された CSS は次のとおりです:

canvas {
  display: block;
}

代替オプション: 垂直方向の配置

キャンバスをブロック要素に設定する場合機能しない場合は、キャンバス上でvertical-align:topを使用してみてください。これにより、キャンバスが親 div 内で垂直方向に整列され、キャンバスの最後までスクロールされるようになります。

更新された CSS:

canvas {
  vertical-align: top;
}

次のいずれかを適用します。これらのソリューションを使用すると、スクロール範囲をキャンバスの寸法に制限し、不必要な空白や下層の div の色の露出を排除できます。

以上がキャンバスが内容を超えてスクロールするのはなぜですか?余分な空白を修正するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。