marginやpaddingでliとliが重なる原因について

Question

お世話になっております。
フリーで公開されているテンプレートをお借りして絞り込みのフォトギャラリーを作成しようとしています。

お借りしているテンプレートはこちらです。
6-2-2 カテゴリ別に画像を並び替える

こちらの

	<ul class="grid">
		<li class="item sort01">
		<div class="item-content">
		<a href="/6-2-2/img/01.jpg" data-fancybox="group1" data-caption="グループ1キャプション"><img src="/6-2-2/img/01.jpg" alt=""></a>
		</div>
		</li>
~省略~
　　　</ul>

をこのように変更

	<ul class="grid">
		<li class="item sort01">
		<div class="item-content">
　　　　　 <a href="">タイトル</a>
		<a href="/6-2-2/img/01.jpg" data-fancybox="group1" data-caption="グループ1キャプション"><img src="/6-2-2/img/01.jpg" alt=""></a>
　　　　　 <a href="">詳細</a>
		</div>
		</li>
~省略~
　　　</ul>

リンクを装飾するためにaタグにpaddingを仮に上下30pxつけようとしたところ、li同士が被ってしまいました。
よく見るとpositionで並べられていたので.itemのposition: absolute;が原因かとおもい、色々試してみたのですが消して他の方法でレイアウトしようと試みるも、絞り込みが効かなくなってしまったり、listにmarginが効き、階段のようにズレてしまいました。

list同士の間に余白を付けられる方法はありますでしょうか。

補足
【1】～【2】

ここからadosluteを消すと

階段状+margin(【1】～【3】の手順で追加したものではない)が現れました。

Comments

[Lhankor_Mhy]

「aタグにpaddingを仮に上下30pxつけようとした」とは、以下のようなコードでいいのですよね？

a {
padding: 30px 0;
}

ご提示のコードを試してみましたが、問題が再現しませんでした。

おそらく、ご提示の部分には原因はなさそうに思います。
ご提示いただいていない部分に原因があるか、問題の共有が上手くできていないと思います。

問題再現の手順をもう少し詳しく書いていただけますか？

[ojreee]

ご確認いただきありがとうございます！
そうですね、実際には追加したaタグにclassを付けて、どちらにもpadding: 30px 0px;を追加した状況になります。

私が行ったことがaタグの追加、aタグにpaddingを追加、position: absolute;の削除です。

【1】aタグを追加
【2】aタグにpaddingを追加
その時点で追加した画像のような現象が起こりました。liとliが重なり合っている(aタグのpaddingやmargin分ズレることがない)
この時点では階段のようにずれる現象は起きていません。
【3】liにpaddingやmarginを追加しても要素が重なることがわかったため、positionを確認して一度消してみたところ、階段状の現象が起きてしまいました。

Answer 1

インラインだからかもしれません。

ボックスの外側の表示タイプが inline の場合:

• ボックスは改行されません。
• width と height のプロパティは適用されません。
• padding、margin および border が適用されますが、他のインラインボックスがボックスから移動することはありません。

リンクに使用される <a> 要素や、<span>、<em> および <strong> はすべて、デフォルトではインラインで表示される要素の例です。
ボックスモデル - ウェブ開発を学ぶ | MDN

どのような表示にしたいのかわからないのですが、ひとまず、

		a {
			display: block;
		}

などとしてみてはどうでしょうか。

なお、絶対配置を外したときに階段状になるのは仕方ないと思います。

Comments

[ojreee]

display: block;を試したところ、やはりリスト同士が重なってしまいました…

https://codepen.io/ugokuweb/pen/yLaxBNE
やりたかったことは、ここのテンプレートのリスト同士の隙間を空ける、のみです。
ただcodepen上ではpaddingを追加してもちゃんと隙間が空くようですね…
ありがとうございました。送っていただいたリンク先とご回答を参考に、色々試してみます。