W3School TIY Editor
W3CSTUDY オンライン チュートリアル
方向を変更
ダーク モード
コードの実行
<!DOCTYPE html> <html> <head> <style> div { background-color: lightgrey; width: 300px; border: 15px solid green; padding: 50px; margin: 20px; } </style> </head> <body> <h1>デモ</h1> <p>CSS ボックス モデル (ボックス モデル) は、基本的に各 HTML 要素をラップするボックスです。 これには、ボーダー、パディング (パディング)、マージン、および実際のコンテンツが含まれます。 </p> <div> このテキストはボックスの内容です。 50 ピクセルのパディング、20 ピクセルのマージン、15 ピクセルの緑色の境界線を追加します。 このテキストはボックスの内容です。 このテキストはボックスの内容です。 このテキストはボックスの内容です。 このテキストはボックスの内容です。 このテキストはボックスの内容です。 このテキストはボックスの内容です。 このテキストはボックスの内容です。 このテキストはボックスの内容です。 このテキストはボックスの内容です。 このテキストはボックスの内容です。 このテキストはボックスの内容です。 このテキストはボックスの内容です。 このテキストはボックスの内容です。 このテキストはボックスの内容です。 このテキストはボックスの内容です。 このテキストはボックスの内容です。 このテキストはボックスの内容です。 このテキストはボックスの内容です。 このテキストはボックスの内容です。 このテキストはボックスの内容です。 このテキストはボックスの内容です。 </div> </body> </html>