人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

はてなブログの CSS について質問です。

添付図の通り、画像と文字の間に自動的に大きなスペースがはいってしまうため、これを縮めたいと思っています。どのような CSS を設定すればよいか教えていただけないでしょうか?

1408634034
●拡大する


●質問者: domodomodomo
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

質問者から
/* 自分で試しにいれてみたが反映されなかった設定 */
.hatena-fotolife img {
 margin: 0 0;
 border: 0;
 padding: 0px;
}

/*
 あまり関係無いかもしれないのですが
 本文の文字サイズなどは entry-content クラスで指定すると反映されます。
 */
.entry-content {
 font-size: 15px;
 line-height: 1.9;
 margin: 3.0em 0;
}

1 ● a-kuma3
●400ポイント ベストアンサー

http://nihaoshijie.hatenadiary.jp/entry/2014/05/27/031847
↑の記事の画像であれば、画像自体に余白がついてます(ウィンドウの外側の影も含む)。
その画像に続く「図. CSS編集フォームの開き方」を囲んでいるタグもないので、画像の下側の余白を切り取らない限り、CSS だけで対処するのは、難しいと思います。

画像に、border: 1px solid green; で縁をつけ、padding も border もゼロになっている状態が、こちらの図です。
f:id:a-kuma3:20140822010914p:image
この、緑の線の内側を削らないと、大幅に詰めることはできません。

緑の線と「図.CSS編集フォームの開き方」の文字の間の隙間は、line-height が 1.9 になっているので、

.entry-content {
 line-height: 1.0; /* 1.9 → 1.0 */
}

とか、

.entry-content center {
 line-height: 1.0;
}

で、多少は詰めることができますが、この図と図の説明の間だけを狭める以外にも、行の高さが変わってきてしまうので、質問の意図とは、ちょっと合わないと思います。


domodomodomoさんのコメント
ご回答いただき、誠にありがとうございます(´;ω;`)ブワッ 追って参考にして修正にチャレンジしたいと思います。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ