paddingとmarginの使い分けで迷っています。

現在下記画像の、ピンクの見出しマークと「最新の作品」の間に余白をとりたくコーディングしています。（親子間をpadding、兄弟間をmarginとして意識しています）
※クラス名p-gallery__tilte の箇所となります

画像の緑色の部分を現在はpaddingで余白をとっているのですが、こちらが兄弟間なのか親子間なのかがわかりません。仮に兄弟間(margin)が正解だったときのコーディングの仕方もわかりませんでしたので教えていただけないでしょうか。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
7    <link rel="stylesheet" href="../../tools/style/reset.css" />
8    <link rel="stylesheet" href="./assets/stylesheets/style.css" />
9    <title>pc-site</title>
10  </head>
11  <body>
12    <div class="l-wrapper">
13      <header class="l-header">
14        <img class="l-header__logo" src="./assets/images/logo.png" alt="ロゴ">
15        <nav>
16          <ul class="p-navlist">
17            <li>
18              <a href="" class="p-navlist__menu">home</a>
19            </li>
20            <li>
21              <a href="" class="p-navlist__menu">about</a>
22            </li>
23            <li>
24              <a href="" class="p-navlist__menu">access</a>
25            </li>
26            <li>
27              <a href="" class="p-navlist__menu">contact</a>
28            </li>
29          </ul>
30        </nav>
31      </header>
32      <div class="c-hero"></div>
33      <main class="l-main">
34        <h1 class="l-main__title">PC カリキュラム</h1>
35        <div class="l-contents">
36          <section class="p-gallery">
37            <h2 class="p-gallery__tilte">最新の作品</h2>
38            <ul class="p-gallery__list">
39              <li>
40                <img class="p-gallery__photo" src="./assets/images/production_01.jpg" alt="夕焼けと海">
41              </li>
42              <li>
43                <img class="p-gallery__photo" src="./assets/images/production_02.jpg" alt="砂浜と貝殻">
44              </li>
45              <li>
46                <img class="p-gallery__photo" src="./assets/images/production_03.jpg" alt="砂浜とドリンク">
47              </li>
48              <li>
49                <img class="p-gallery__photo" src="./assets/images/production_04.jpg" alt="桟橋">
50              </li>
51              <li>
52                <img class="p-gallery__photo" src="./assets/images/production_05.jpg" alt="小船">
53              </li>
54              <li>
55                <img class="p-gallery__photo" src="./assets/images/production_06.jpg" alt="夕日の空">
56              </li>
57            </ul>
58          </section>
59          <section class="p-selfintroduction">
60            <h2 class="p-selfintroduction__title">自己紹介</h2>
61            <p class="p-selfintroduction__text">
62              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
63            </p>
64          </section>
65        </div>
66      </main>
67      <footer class="l-fotter">
68        <div class="c-copyright">
69          <div class="c-copyright__inner">
70            <p class="c-copyright__text">
71              <small>© 2019 example.inc</small>
72            </p>
73          </div>
74        </div>
75      </footer>
76    </div>
77  </body>
78</html>

CSS
1@charset "UTF-8";
2
3.l-wrapper {
4    width: 1024px;
5    background-color: #fffaf0;
6}
7
8.l-header {
9    display: flex;
10    justify-content: space-between;
11    align-items: center;
12}
13
14.l-header__logo {
15    width: 90px;
16    height: 90px;
17    padding: 10px;
18}
19
20.p-navlist {
21    display: flex;
22}
23
24.p-navlist__menu {
25    margin-right: 40px;
26    font-size: 150%;
27    text-decoration: none;
28}
29
30.c-hero {
31    height: 500px;
32    background-image:url(../images/hero.jpg);
33    background-repeat:  no-repeat;
34    background-size: cover;
35}
36
37.l-main__title {
38    display: flex;
39    justify-content: center;
40    padding: 130px 0px 130px 0px;
41    color: #808080;
42    font-size: 160%;
43}
44
45.p-gallery {
46    color: #808080;
47    font-size: 200%;
48}
49
50.l-contents {
51    display: flex;
52    padding-left: 70px;
53}
54
55.p-gallery__tilte {
56    margin-bottom: 40px;
57    padding: 2px 0px 0px 20px;
58    border-left: solid 8px #ff69b4;
59    background: transparent;
60    color: #808080;
61    font-size: 80%;
62}
63
64.p-gallery__list {
65    display: flex;
66    flex-wrap: wrap;
67}
68
69.p-gallery__photo {
70    width: 180px;
71    height: 140px;
72    margin: 5px 10px 0px 0px;
73}
74
75  .p-gallery {
76    width: 400%;
77  }
78
79  .p-selfintroduction {
80    padding-right: 20px;
81  }
82
83  .p-selfintroduction__title {
84    margin-bottom: 40px;
85    padding: 2px 0px 0px 20px;
86    border-left: solid 8px #ff69b4;
87    background: transparent;
88    color: #808080;
89    font-size: 160%;
90  }
91
92  .p-selfintroduction__text {
93    color: #808080;
94    font-size: 120%;
95    line-height:30px;
96  }
97
98  .c-copyright__inner {
99    display: flex;
100    justify-content: center;
101    padding: 100px 0px 100px 0px;
102  }
103
104  .c-copyright__text {
105    padding: 30px 50px;
106    border: solid 2px white;
107    background: #6495ED;
108    color: #fff;
109    font-size: 80%;
110    box-shadow: 0px 0px 0px 10px #6495ED;
111  }

runnynose

2021/07/01 12:06 編集

すみません、いまいち何が聞きたいのかわかりませんでした^^; タイトルが「paddingとmarginの使い分けで迷っています。」となっていて、説明文に「親子間をpadding、兄弟間をmarginとして意識しています」とご自身の中での答えを持っている状態で最終的に聞きたいことがタイトルとあっていないように聞こえました。 > こちらが兄弟間なのか親子間なのかがわかりません。「こちら」が何を指しているのかわかりませんでした。「こちら」が指しているものが「p-gallery__tilte」のことを指しているのだとしたら、タグ構造を見る限り「p-gallery」とは親子関係であり、「p-gallery__list」とは兄弟関係にあたります。もし、上記の内容以外での親子関係ということでしたら、何かを勘違いしている可能性があるかも知れません。

maring

2021/07/01 13:49

こちらとはp-gallery__tilteのことです。 cssのp-gallery__tilteという１つのセレクタの中で「ピンクの見出し」と「最新の作品という文字」の２つの役割をつけてるのですが、今回その「ピンクの見出し」と「最新の作品という文字」の余白をpadding: 2px 0px 0px 20px;でとってるのですが、「ピンクの見出し」と「最新の作品という文字」は親子間(padding)という認識で合っているのでしょうか？　もし違っていれば(兄弟間なら)marginでのコーディング方法も知りたいといった感じです。

runnynose

2021/07/01 20:43 編集

やっぱりタグの親族の関係性を何か勘違いしているかも知れないです。 p-gallery__tilte要素のピンクの部分はp-gallery__tilteのボーダーです。p-gallery__tilteの「最新の作品という文字」と言う文字はp-gallery__tilteのテキストです。どれもp-gallery__tilte自身なので、この中では親族の考え方は存在しない認識でいます。ちなみに私はよく、要素の説明を家に置き換えて説明することがあります。(色はdeveloperツールの色部分を示してます) 要素(青) = 家 padding(緑) = 庭 border(黄) = 塀 margin(橙) = 道今回はp-gallery__tilteさん自身の装飾に当たるので、ピンク(塀)との距離感はpadding(庭)で良いと思います。 p-gallery__tilte⇔p-gallery__list間の余白は敷地外なのでmargin(道)を使用します。道は共有エリアなので、お互いにmarginがある場合は重なり合います。と言う具合なのですが、最初のうちはあまり考えすぎずにデザインを再現することに集中しても良さそうですが。。。

maring

2021/07/04 05:19

詳しく解説していただきありがとうございます。 p-gallery__tilteさん自身の装飾という言葉がとてもしっくりきました。 paddingのままで進めたいと思います。何度もお手数おかけしました。