ネガティブマージンを使ったレイアウトサンプルなど

ネガティブマージンを使う事で重なりを生み出す

ネガティブマージンを使ったサンプル

見だし見だし見だし

テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。

リンクボタン

見だし見だし見だし

テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。

リンクボタン

見だし見だし見だし

テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。

リンクボタン

見だし見だし見だし

テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。

リンクボタン

見だし見だし見だし

テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。

リンクボタン

見だし見だし見だし

テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。

リンクボタン

block・inline要素に設定してみる

padding:50pxを設定したdivを配置し、その中にネガティブマージンとして、margin: -50px 0px 0px -100px; をそれぞれ設定

Pタグへのネガティブマージンサンプル

spanタグへのネガティブマージンサンプル(上のネガティブマージンが効かない)
display:blockを付与したspanタグへのネガティブマージンサンプル

ブログ記事