私はhtmlとjqueryでデザインエディタを作成しました。これにより、テキストボックスや画像などを追加して、デザインを作成できます。これを行うには、キャンバスとして機能する境界線のあるdivがあり、ユーザーは、ドラッグ可能でサイズ変更可能なdivなどを動的に作成するボタンをクリックすることでテキストや画像を追加できます。 PhotoshopやIllustratorのキャンバス、またはMSWordでテキストボックスや画像を追加するようなものです。
私の質問は、キャンバスの端の近くにマージンガイドラインを追加するにはどうすればよいですか？他の編集ソフトウェアで「グリッドを表示」を選択する方法と同様の線を表示できることについて話しています。（ただし、グリッドは必要ありません。エッジから0.5 cmのマージンラインだけが必要です）。
端の近くの余白線を除いて完全に透明なPNG画像を使用し、この画像をキャンバス上に引き伸ばすことを検討しました$('#content')。ただし、その上に配置されるすべてのテキストまたは画像が線を覆います。私はこれを本当に気にしませんが、常に線を表示する方法はありますか？PNG画像がすべてをカバーするため、クリックまたは編集できないため、キャンバス上のアイテムよりも高いz-indexを指定することはできません。内部で境界線のあるdivを使用する場合も同じです$('content')。これも、背後にあるものがクリックできなくなるためです。
マージンラインは視覚的な補助にすぎないことに注意してください。ユーザーは、このラインを超えるものを配置できます。何か案は？
とにかくこのようなことができるでしょうか：
#content{ border:1px dotted gray; border-position: -5px; }
コンテンツDIVの境界線を端ではなくDIVの内側に押し込むようにしますか？
または、マージンを追加する他の方法はありますか？