Ruby on Railsアプリのトップページの変な隙間を消したい！

みなさんこんにちは！言語交換サイト３９を運営しているケンタリートです。
今回は、トップページのヘッダーと画像の隙間にある空間を消してみたいと思います。正直、ずーーーっと、なんでここに隙間があるのか悩んでいました。CSSをチェックしても、htmlをチェックしてもわからない。

しかしChromeのDevelper Toolsを利用したおかげで、ついに謎がとけました。いままでDeveloper Toolsを使ったことがなかったのですが、先日とある仕事に応募してみようと、改めてCSSのレイアウトについて勉強している時に、使ってみたのです。ていうか、仕事せずに、のんびり暮らす予定なのに、仕事に応募している私。とりあえず、Developer Tools を開いてみると、こういう事になっていました。

ここにmargin-bottomがついているからです。それにしても、このCSSはなでしょうか。

こちらが私のスタイルシートフォルダです。自動生成された物以外は特に何も入ってないんです。

これは実は、私がいままで、アセットパイプラインがよく分からずに、プレコンパイルをして、heroku上にデータをアップしていたことが原因のようです。よくわからないCSSたちがここのフォルダたちにうじゃうじゃ溜まっています。

このうじゃうじゃ、もやもやをスッキリさせてくれたのが、このサイトです。
rails.hatenadiary.jp

もう５分どころか１分でわかっちゃいました。いままで自動でプレコンパイルしていなかったので、その設定をして、public/assets以下にある物を全て消してみます。正直、溜め込んでたものを削除するのは怖いですが仕方ないですね。それでは、このブログにあるように、コマンドを打ってまるっと消してみよう。信じているよ。rm -rf public/assets/　はい。すっぱり消えました。assetsフォルダすらありません。さらに、動的にコンパイルするために、下記のproduction.rbを変更します。config.assets.compile = true　はい、これで言われたことは全てやりました。新しくコミットして、アップしてみます。さて、どうなるか！

おかしい。何もトップページに変化はありません。
また次回に続く。笑

• • • • • • • • • • • • • • • • • • • • • • • • -

Cloud9のサーバーで確認したところ、この隙間は、bootstrapのnavberのCSSに組み込まれていることがわかりました。CSSのnavbarをmargin-bottom:0px;で上書きすることで無事隙間はなくなりました。が。本当に消したいかどうか、わからなくなったので放置です。