要素の上下の間隔を空けたい

Question

画像＋文章の要素で、上下の間隔を空けたいです。。。

    <section class="section-wrapper">
      <h2 class="section-title">skills</h2>
      <ul class="skills-list">
        <li class="skills-item">
          <div class="skills-list-img"><img src="./img/html.png"></div>
          <p class="works-list-text">調べながらですが、0からのコーディングができます。デザインカンプ通りのコーディングも可能です。</p>
        </li> 
        <li class="skills-item">
          <div class="skills-list-img"><img src="./img/html.png"></div>
          <p class="works-list-text">調べながらですが、0からのコーディングができます。デザインカンプ通りのコーディングも可能です。</p>
        </li> 
        <li class="skills-item">
          <div class="skills-list-img"><img src="./img/html.png"></div>
          <p class="works-list-text">調べながらですが、0からのコーディングができます。デザインカンプ通りのコーディングも可能です。</p>
        </li> 
・
・
・

.skills-list{
  max-width: 1000px;
  margin: 0 auto 80px;
  padding: 0 50px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.skills-list-img img{
  height: 60px;
  width:60px;
}
.skills-list-img{
  text-align: center;
  padding-bottom: 10px;
}
.skills-item{
  width: 32%;
  background-color: #fff;
}
.skills-list-text{
  padding: 25px 20px;
}

Answer 1

ご希望のことが、いまいち把握できていないですが、

flex-wrap: wrap; になっていることから推測するに、レスポンシプデザイン（メディアクエリ？）で列数が変化する。

li.skills-list（画像＋文章の要素）の上下の間隔を空けたい。
ただし、先頭行の上と最終行の下には余白はつけたくない。

というようなことでしょうか。

.skills-list{
  max-width: 1000px;
/*margin: 0 auto 80px;*/
  margin: 0 auto 30px;/*margin-bottomを50px減らす*/
  padding: 0 50px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  list-style: none;
}

/* 中略 */

.skills-item{
  width: 32%;
  background-color: #eee;
  margin-bottom: 50px; /* 追加 */
}

.skills-item に margin-bottom で下余白を付けて、
親要素の margin-bottom を減らす（場合によってはネガティブマージンにする）ことで
最終行の margin-bottom を打ち消す。

Comments

[_arukuneko]

言葉足らずにも関わらず汲み取っていただきありがとうございます。
jinbaさんのようなやり方もあるのですね。レスポンシブ対応する際に使ってみます。
pc版はhatena19さんのやり方で解決しました。
ありがとうございました。

Answer 2

間隔を空けたい要素にマージンをつけましょう
CSSへ下記を追記してみてください

.works-list-text{
background: red;/* わかりやすく色つけた消してください */
margin-top: 50px;/* 文字の入ってる要素の上スペース */
margin-bottom: 50px;/* 文字の入ってる要素の下スペース */
}

---

追記：

上行と下行の間隔を空けたいとのことですが
質問のHTMLソースには下行のコードがありません

上行のulタグのクラスと下行のulタグのクラスが別名ならば
下行のulタグへmargin-topを指定すればいいだけなので話は早いのですが

上行のulタグのクラスと下行のulタグのクラスが同名ならば
下行のulタグへIDかクラスを追加してmargin-top指定するか

下記のようにスペース用<p>タグでも挿入してmargin-topを指定してはいかがでしょう？

<ul class="skills-list">
略
</ul>
        
<p class="spacer"></p>
        
<ul class="skills-list">
略
</ul>

p.spacer{
margin-top: 500px;
}

Comments

[_arukuneko]

回答ありがとうございます。
それだと、下行の【works-list-text】にも余分な【50px】が空いてしまうのです。。。

上行と下行の間隔を空けたい　というイメージです。