質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
float(CSS)

これはCSSのfloatプロパティのタグです。指定された要素を左または右に寄せて配置する際に使用します。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

解決済

このimgと\.top間の余白をなくしたいです。

ktkr
ktkr

総合スコア0

float(CSS)

これはCSSのfloatプロパティのタグです。指定された要素を左または右に寄せて配置する際に使用します。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

1回答

0評価

0クリップ

1714閲覧

投稿2016/11/24 09:35

編集2022/01/12 10:58

このimgと.top間の余白をなくしたいです。
.topはフロートで右側に来るように設定したのですが、位置が右端になってしまうので画像の真横(正しくは画像から5px離れた場所)に設定したいです。フロートを左にするというのは無しでお願いします。

html

<h3>実食レポート</h3> <hr/> <dl class="listD02"> <dt class="fmenu_head">初めてのおかかおにぎり</dt> <dd><img src="images/207\.jpg" alt="photo" width="120" height="120"> <div class="top"> れいさん<br> 年齢:21歳<br> 職業:学生<br> お店:おかかの店<br> 会計:890円<br> </div> <div class="bottom"> <span class="bass">▼お店のレポート</span><br> 私は今までおにぎりといえばツナマヨか梅しか食べませんでした。おかかや昆布はなんだか年寄りみたいで 恥ずかしくて買わなかったんです。最近職場でおにぎりブームが始まり、おかかおにぎり絶賛の同僚に勧め られしぶしぶお店に同行することに。店内は意外ときれいで落ち着いた感じ。夜はちょっとした小料理店に なるそうです。私はお店一押しのおかかおにぎりのセットを注文。熱いお味噌汁にお漬物が食欲を掻き立て ます。少しお味噌汁でおなかを落ち着かせてパリッとした大きめのノリで巻かれたおにぎりをパクリ。。。 『うっ、上手い!!』なんということか。今までツナマヨと梅しか知らなかった私に衝撃が走りました。こ れはおにぎり革命だ。アツアツの白いごはんの中に濃い目の甘辛いおかか。さらにプチプチとゴマに触感と 香りがたまらず食べる手が止まりませんでした。まだおかわりしたかったのですが、同僚の前では恥ずかし くて言い出せず、名残惜しい気持ちで店を後にしました。夜は小料理店になりますがおにぎりも出してもら えるそうなので今晩突撃しようと思います。 </div> </dd> </dl>

css

h3{ color:#886138; background-color:#F2DCCC; font-size: 16px; line-height: 30px; text-align: left; border-style: solid solid none; border-width: 1px; display: block; width: 170px; margin-left: 5px; margin-top: 20px; } hr{ background-color:#886138; margin: 0; margin-right: 5px; margin-left: 5px; border: none; height: 1px; } #gyousyu_syoukaiphoto{ margin: 10px 5px; } \.top{ float: right; text-align: left; word-wrap: normal; } \.bottom{ clear: both; } \.fmenu_head{ background-color:#FFBFF5; display: block; border-radius: 5px; line-height:30px; font-size: 18px; text-align: center; margin: 10px 5px; color: #464646; } \.listD02 { padding: 10px; font-size: 14px; } \.listD02 \.bass{ font-size: 18px; color: #FF46A7; }

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

float(CSS)

これはCSSのfloatプロパティのタグです。指定された要素を左または右に寄せて配置する際に使用します。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。