馬米思個人紀錄站

• 2.4 Boxes and Columns - 
  https://webdesign.tutsplus.com/courses/understanding-the-css-box-model/lessons/boxes-and-columns

兩欄式設定
HTML
<section class="column">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt velit ante, non laoreet est facilisis quis. Fusce eget massa nec magna suscipit finibus ut non lacus. Nam vel aliquam mi, eget rhoncus eros. In malesuada, erat quis accumsan rutrum, risus nunc vulputate ipsum, ut fringilla magna nisi non neque. </p>
</section>

CSS
.column{
      width:380px;
      padding:0 5px;
      float:left;
}
.column:first-of-type{
     margin-right:10px;
}

2.6 Inline Elements
使用 <span> 標籤的屬性，來設定padding，可運用使其內縮首行與擴張行尾。
此屬性與其他Element效果不同。
Examples of inline elements: <span><a><img>

2.7 Box-Sizing
https://webdesign.tutsplus.com/courses/understanding-the-css-box-model/lessons/box-sizing

更清晰的解釋請參考這個網址
http://zh-tw.learnlayout.com/box-sizing.html 

因為 box-sizing 算是個比較新的屬性，
所以你還應該還是要加上我之前在例子中使用的 -webkit- 和 -moz- 前綴（Prefixes），
這樣才能啟用特定瀏覽器實驗中的 CSS 特性。請記得該屬性從 IE8+ 之後就開始支援。

程式碼如下：
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

但以上的屬性，並不會包覆margin，只會包覆padding與border的設定。