我要成為前端工程師的學習筆記：HTML & CSS 篇 - div、margin、padding Day6

div 與 後代選擇器

div：
它本身是沒有語意的，單純拿來排版用的標籤，因為是排版用所以會有區塊元素的特性。

後代選擇器：
我們拿 a 連結來解釋，先寫一段 CSS 效果套用上去，此時所有 HTML 上的 a 連結效果都會一樣，但又想在把某區塊的 a 連結做不同的效果，這時候就需要用後代選擇器，來達成不同的 CSS 效果，以下程式的 style1 跟 style2 它們的 a 連結就不一樣顏色。

例如：
style1 的 a 要設定紅色
CSS 寫法： .style1 a { color: red; }
style2 的 a 要設定粉色
CSS 寫法： .style1 a { color: pink; }

HTML：

// 設定 style1 跟 style2 兩個不一樣的 CSS，p 段落另外設定 content css 效果，都有使用到後代選擇器

<div class="style1">
  <h2>標題</h2>
  <a href="#">red</a>
  <a href="#">red</a>
  <a href="#">red</a>
  <p class="content">這是段落</p>
  <p>這是段落</p>
</div>
<div class="style2">
  <a href="#">pink</a>
  <a href="#">pink</a>
  <a href="#">pink</a>
</div>

CSS：

.style1 h2 {
  font-size: 30px;
}

.style1 a {
  color: red;
}

.style1 .content {
  font-weight: bold;
}

.style2 a {
  color: pink;
}

呈現畫面：

margin

margin 就是使一個區塊產生外邊界距離，意思是在邊界向外推擠一個距離，能推擠上右下左四個方向，在排版上會蠻常使用。

使用方式：
上右下左： margin: 距離;
上： margin-top: 距離;
右： margin-right: 距離;
下： margin-bottom: 距離;
左： margin-left: 距離;

HTML:

<div class="box">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius debitis dolor libero excepturi atque odit laboriosam voluptatum mollitia rem assumenda ipsa pariatur praesentium, id molestias eveniet aspernatur sed expedita voluptate?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex exercitationem sequi mollitia nostrum ullam unde, aspernatur pariatur sed ducimus deleniti.</p>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus, laudantium!</p>
 </div>

CSS:

.box {
  font-size: 30px;
  border: 5px solid blue;
  width: 500px;
  margin-left: 30px;    //  box 向左推 30px
}

.box p {
  margin-bottom: 30px;   // p 段落向下推 30px
}

畫面：

padding

padding 就是在一個區塊內產生留白距離，例如我們想在區塊內部左邊推 30px 留白，而一個區塊內有多個區塊的話，就必須在內部每個區塊寫上 margin-left 向左推，可是這樣就會重複寫 margin-left ，此時就可以直接寫一個 padding-left 向內部左邊推擠 30px，來解決重複寫 margin-left 的問題。

使用方式：
上右下左： padding: 距離;
上： padding-top: 距離;
右： padding-right: 距離;
下： padding-bottom: 距離;
左： padding-left: 距離;

以下程式碼 padding 是寫向內推四個方向。
HTML:

<div class="box">
  <h2>大標題</h2>
  <ul>
    <li>列表</li>
    <li>列表</li>
  </ul>
  <a href="#">連結</a>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius debitis dolor libero excepturi atque odit laboriosam voluptatum mollitia rem assumenda ipsa pariatur praesentium, id molestias eveniet aspernatur sed expedita voluptate?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex exercitationem sequi mollitia nostrum ullam unde, aspernatur pariatur sed ducimus deleniti.</p>
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus, laudantium!</p>
</div>

CSS:

.box {
  font-size: 30px;
  border: 5px solid blue;
  width: 500px;
  margin-left: 30px;
  padding: 30px;    // 在 box 向內四個方向推 30px
}

.box p {
  margin-bottom: 30px;
}

畫面呈現：