HTML・CSS/レイアウト - api_programming @ ウィキ

下位ページ

Content

HTML+CSSでの段組みレイアウト作成について

http://qiita.com/ken200/items/1fd088cf324f479e5104

div要素を回り込ませる

float

回り込みの設定

positionで位置を決める

position

で位置を決める
親要素やinline要素
MDN-開発者向けのWeb技術-CSS
HTMLクイック・リファレンス-スタイルシートリファレンス-position

margin, padding, width, height

width, heightで指定したサイズの上にpaddingの指定幅が乗っかる。
widthは左のボーダーから右のボーダーまでの距離をしてしているのではない。
https://zxcvbnmnbvcxz.com/css_sutudy_1/

width, height と padding, border-width の解釈を変える

box-sizing

の指定で、width(height)の値を、"content" + "padding" + "border-width" とすることができる。
MDN box-sizing
http://www.htmq.com/css3/box-sizing.shtml

inline-blockでマージンを指定していないのに隙間ができる、に対処する

原因：スペース、改行コードを表示する文字として認識してしまう。
対策

• 文字サイズを一時的に（＝親要素を）0にする
  • そして、実際に表示させるところで、文字サイズを戻す
• html文書にスペースを入れない
• cssでletter-spacingを調整する
• 閉じタグを入れない
  • 次のタグが現れるまでがbox要素と認識されるから？

https://webledge-blog.com/inline-block-sukima/

角丸

border-radius
http://www.htmq.com/css3/border-radius.shtml

display : table

table でレイアウトを作る
https://app.codegrid.net/entry/css-table-1
使うべきでない、という記事も。
https://qiita.com/sawadays0118/items/4c329fd05cdff14ffebc