CSS
margin
padding
DeveloperTool
boxmodel

cssのBox modelを可視化する。

More than 1 year has passed since last update.

概要

cssのbox modelを理解する。

Step1 : Test用のSourceを用意

Source

test.html
<div class="container">
  <div class="row">
    <p>test</p>
  </div>
</div>

Recult

Step2 : 背景をつける

Source

test.html
<div class="container">
  <div class="row">
    <div class="test_box">
      <p>test</p>
    </div>
  </div>
</div>
site.css
.test_box {
 background-color: #ddd;
}

Result

ここでGoogle Chrome Developer ToolでBox Modelを見てみる。
右クリック> 検証 > class="test_box"
develop_1.jpg

Step3 : 色をつけて、margin , paddingを当ててみる。

site.css
.test_box {
  text-align: center;
  background-color: #ddd;
  margin: 4rem;
  padding: 1rem;  
  border: 5px solid red;
  outline: 10px solid blue;
}

develop_3.jpg