質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.02%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

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

_arukuneko
_arukuneko

総合スコア19

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

2回答

0グッド

0クリップ

575閲覧

投稿2020/08/27 11:18

イメージ説明

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

HTML

1 <section class="section-wrapper"> 2 <h2 class="section-title">skills</h2> 3 <ul class="skills-list"> 4 <li class="skills-item"> 5 <div class="skills-list-img"><img src="./img/html.png"></div> 6 <p class="works-list-text">調べながらですが、0からのコーディングができます。デザインカンプ通りのコーディングも可能です。</p> 7 </li> 8 <li class="skills-item"> 9 <div class="skills-list-img"><img src="./img/html.png"></div> 10 <p class="works-list-text">調べながらですが、0からのコーディングができます。デザインカンプ通りのコーディングも可能です。</p> 11 </li> 12 <li class="skills-item"> 13 <div class="skills-list-img"><img src="./img/html.png"></div> 14 <p class="works-list-text">調べながらですが、0からのコーディングができます。デザインカンプ通りのコーディングも可能です。</p> 15 </li> 161718

CSS

1.skills-list{ 2 max-width: 1000px; 3 margin: 0 auto 80px; 4 padding: 0 50px; 5 display: flex; 6 justify-content: space-between; 7 flex-wrap: wrap; 8} 9.skills-list-img img{ 10 height: 60px; 11 width:60px; 12} 13.skills-list-img{ 14 text-align: center; 15 padding-bottom: 10px; 16} 17.skills-item{ 18 width: 32%; 19 background-color: #fff; 20} 21.skills-list-text{ 22 padding: 25px 20px; 23}

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答2

0

ベストアンサー

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

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

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

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

css

1.skills-list{ 2 max-width: 1000px; 3/*margin: 0 auto 80px;*/ 4 margin: 0 auto 30px;/*margin-bottomを50px減らす*/ 5 padding: 0 50px; 6 display: flex; 7 justify-content: space-between; 8 flex-wrap: wrap; 9 list-style: none; 10} 11 12/* 中略 */ 13 14.skills-item{ 15 width: 32%; 16 background-color: #eee; 17 margin-bottom: 50px; /* 追加 */ 18}

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

投稿2020/08/27 12:26

編集2020/08/27 12:28
hatena19

総合スコア32244

下記のような回答は推奨されていません。

  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

_arukuneko

2020/08/27 12:58

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

0

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

CSS

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

追記:

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

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

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

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

html

1<ul class="skills-list"> 23</ul> 4 5<p class="spacer"></p> 6 7<ul class="skills-list"> 89</ul>

CSS

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

投稿2020/08/27 11:39

編集2020/08/27 12:18
jinba

総合スコア310

下記のような回答は推奨されていません。

  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

_arukuneko

2020/08/27 11:59

回答ありがとうございます。 それだと、下行の【works-list-text】にも余分な【50px】が空いてしまうのです。。。 上行と下行の間隔を空けたい というイメージです。

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.02%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。