Chapter.1段落毎に文章を完成させる

07余白の定義を理解し、文字の下線をデザインせよ

emoji_objects

外側に余白を入れる

内側に余白を入れる

文字に余白を入れて背景色を入れる

文字のある行に下線を入れる

文字に下線を入れる

文字にデザインした下線を入れる

-- css --
.****1 {
  margin: 20px;
}
.****2 {
  padding: 20px;
}
.****3 span {
  padding: 20px;
  background: #DF7F62;
}
.****4 {
  border-bottom: 1px solid #000;
}
.****5 span {
  border-bottom: 1px solid #000;
}
.****6 span {
  padding-bottom: 8px;
  border-bottom: 4px solid #DF7F62;
}

-- html --
<p class="****1">外側に余白を入れる</p>
<p class="****2">内側に余白を入れる</p>
<p class="****3"><span>文字に余白を入れて背景色を入れる</span></p>
<p class="****4">文字のある行に下線を入れる</p>
<p class="****5"><span>文字に下線を入れる</span></p>
<p class="****6"><span>文字にデザインした下線を入れる</span></p>
       

ヒント

-- css --
margin
padding
border