u16suzuの blog

日々学んだことのメモブログです。

cssのパディングとマージン

パディングとマージンどっちがどっちかよく忘れるのでメモしておく。

f:id:u16s:20160216182202p:plain

コード

<html>
<head>
<style type="text/css">
div  {
  padding : 10px; /* 要素とボーダーラインのあいだの距離 */
  border : 5px solid maroon; /* ボーダーラインの幅 */
  margin : 10px; /* ボーダーラインと画面の端の距離 */
  background-color : lightgreen;
}
</style>
</head>
<body>
  <div class="hoge">
    hoge
  </div>
</body>
</html>

ちなみにcssでは // をコメントに使えないので /* */ を使う必要がある。