TIL-CSS(box model)

22.04.18

🍞 ボックスタイプ

すべてのHTML要素は、ボックスモデル(box model)と呼ばれるボックス(box)形状で構成されています.ボックスモデルでは、HTML要素を塗りつぶし、枠線、余白、および内容に分割します.

✍(◔◡◔) 요소별 유형
🔑 block 요소 : 요소를 박스화시켜, 위아래의 줄바꿈이 일어나도록 합니다.
🔑 inline 요소 : 요소들을 같은 줄에 표시함으로써, 폭,높이 및 상하 여백 조정 불가합니다.
🔑 inline-block 요소 : 요소들을 같은 줄에 표시하되, 폭,높이 및 상하 여백 조정이 가능토록 합니다.

✍(◔◡◔) CSS 박스 모델의 영역별 구분
📌 내용(content) : 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분입니다.
📌 패딩(padding) : 내용과 테두리 사이의 간격입니다. 패딩은 눈에 보이지 않습니다.
📌 테두리(border) : 내용과 패딩 주변을 감싸는 테두리입니다.
📌 마진(margin) : 테두리와 이웃하는 요소 사이의 간격입니다. 마진은 눈에 보이지 않습니다. 

h1{
border:5px solid red;
padding:20px;
margin:0;
display:block;
}

🍬 heightとwidthのプロパティについて

すべてのWebブラウザでHTML要素を正確に表示するには、これらのボックスモデルの動作原理を明確に理解する必要があります.
CSSでは、高さと幅のプロパティで設定された高さと幅には、塗りつぶし、枠線、余白のサイズは含まれません.

h1{
border:5px solid red;
padding:20px;
display:block;
width:100px;
height:50px;
}

🥨 見出しの下に行を付ける

📌 h 1ラベルの枠線を使用します.

<style>
h1{
font-size:45px;
text-align: center;
border-bottom:1px solid gray;
padding:20px;
margin:0;
}
</style>

📌 何を修正する必要があるかを知るために、チェックで修正することができます.
Web上のスペースが大きいことがわかります.
これはmargin値があるからです.すなわち、スペースを保持するにはmargin値を削除する必要があります.

📌 margin値を0に変更すると、margin値が消え、上の余白も消えます.

🍨 目次を区切る垂直線を挿入

<style>
ol{
border-right:1px solid gray;
width:100px;
}
</style>
📌 오른쪽의 선을 추가해야 하기 때문에 border-right를 통해 선을 추가하고 width로 선의 값을 조절합니다.

🍦 行間隔の削除

📌 目次を縦に区切って入れると、上の横線の間に空白があります.もう一度チェックして、なぜ空白が発生したのかを見つけると、空白は余白値によって引き起こされていることがわかります.

📌 margin値を0に変更すると、行間隔は消えますが、1になります.htmlが上の行にぴったり合っていることに気づきました.

📌 padding値を指定してギャップを拡大します.

`<style>`
ol{
border-right:1px solid gray;
width:100px;
padding:20px;
margin:0;
}
`</style>`

📌 bodyラベルにマージンがあるかどうかを確認し、マージンを0に変更してマージンを除去できます.

<style>
body{
margin:0;
}

📌 margin値を0に変更すると、画面のように空白が消えます.