0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

hamlの隙間を埋める

Last updated at Posted at 2020-08-07

hamlでビューの編集中にイラっとすることがあったので、その解決法です

現象とコード

一言で言えば、隙間がすごく気になっただけです。
1️⃣編集前

sample.html.haml
平均値を超えた数値は赤くなります


これを編集して「赤く」の部分の文字色を赤くしようと思いました。

2️⃣編集後

sample.html.haml
平均値を超えた数値は
%span{style: "color: red"} 赤く
なります

spanタグで color: red を当てたところ

あら?
思っていたのと違う。

編集前 編集後

marginやpaddingを当てたわけじゃないのに隙間が空いた。
どうやらhamlの仕様で改行したことによって隙間が生じたみたいです。

3️⃣対策後

sample.html.haml
平均値を超えた数値は
%span{style: "color: red"}> 赤く
なります


spanタグに「>」をつけただけで直りました。
どうやら、「>」はタグの外側の隙間を埋めて、「<」はタグの内側の隙間を埋めてくれるようです。
早い話が、両方つけておけばOKみたいです。

参考サイト

haml公式ドキュメント

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?