| -1273- HTML 覚書 |
|
オタクな話題だが、しばらく悩んでしまったので、メモ。 HTML 上では通常 スタイルシートを使ってレイアウトを構成しているが、時々 タグのデフォルトの設定が災いして思うようにレイアウトが決められないことがある。 今回ぶつかったのは、<figure> タグ。これは写真などにキャプション(タイトル)を付ける場合に<figcaption> と共に使われるが、この<figure> タグの中に<img> タグで画像を表示するとデフォルトはその画像の左右マージンが(殆どのブラウザで勝手に?)40px 程度もとられてしまうらしい。今作っているページの表中にセル幅ギリギリで画像を配置したら、急にセル幅が増えてしまって???な状態に。 どうやら、ブラウザが勝手に左右マージンを入れるらしい。 対策として css側で figure {margin-left: 0; margin-right: auto; margin-top: 0; margin-bottom: 0; padding: 0; } などとマージンをリセットしたら、他のブロック要素タグ同様マージンはリセット出来たようだ。(その後確認して一括 margin: 0 でも良かった) 今日の写真は フウセンカズラの実。見事に鈴なりになっているが、今頃実を付けるんだっけ? |
|
2014/11/21 |