「margin、border、paddingの違いについて」の編集履歴(バックアップ)一覧に戻る

margin、border、paddingの違いについて - (2015/05/07 (木) 06:54:41) のソース

ここではborder、padding、marginの基本的な使い方ついて記していきます。~
~
想像してみてください。デザイン性の高いWebページの条件とはなんでしょうか。~
…答えはいくつかあると思いますが、その中の1つに「読みやすさ」があると思います。~
~
~
HTMLでは、さまざまな画像や文字がお互いの距離などの関係性の中でコードを記していきます。~
文字や画像などをHTML上にのせた場合に、その「要素の内容」からとなりの要素までの距離について、「border、padding、marginで定義してゆく」のです。~
~
まずはこちらの画像をご覧ください。
#image(center,width=600px,概要図.JPG)
border、padding、marginを理解するにはこの図が分かりやすいのかな、と思います。~
これで理解された方は戻るボタンを押していただいても大丈夫です。~

&bold(){注意すべき点}~
&color(red){2段カラムなど、横方向に2つ以上あるカラムのwidthは一つずつ絶対値で指定する。}ということです。~
相対値(%)は好ましくないです。また、2段カラムにおいて、左側は絶対値等で指定して、右側は残りの長さ~とやるのも好ましくないです。~
ブラウザごとの違いがあるからです。

参考URL:http://desperadoes.biz/style/dan/