玉石間距打破按鈕？

Question

我正在編程Jade中的一些按鈕，並且對於間距如何工作我有點困惑。

頂部示例函數，但將所有按鈕離得太近。

第二個示例（在「a(href」之前增加了一個空格）完全斷開鏈接，同時正確地間隔按鈕。

翡翠對間距很敏感嗎？誰能告訴我這裏發生了什麼？

div.sub-menu 
    div.wrapper 
    a(href="#/microsite/a") 
    input(type="button", class="button white-button", value="A") 
    a(href="#/microsite/p") 
    input(type="button", class="button white-button", value="P") 




div.sub-menu 
    div.wrapper 
    a(href="#/microsite/a") 
    input(type="button", class="button white-button", value="A") 
    a(href="#/microsite/p") 
    input(type="button", class="button white-button", value="P") 

Answer 1

是的，翡翠對間距很敏感。間距決定了每個標籤的嵌套。

因此，在下面的代碼

element 
    child 

會看到這個HTML：

<element><child></child></element> 

代碼

element 
child 

會產生這樣的：

<element></element><child></child> 

這當然會導致在瀏覽器中查看完全不同的結果。

要在每個鏈接前添加一個空格，您需要在父標籤（可以爲第一個鏈接執行此操作）或piping（在第二個鏈接之前的單獨一行中）之後添加它。

請注意，當指定標籤內容/管道文本時，實際文本內容前面有一個空格。此白色空間不輸出。所以，實際上，要管一個空格，你需要一個|字符，然後是兩個空格。

例如爲：

div.sub-menu 
    //- div.wrapper is followed by *two* spaces 
    div.wrapper 
    a(href="#/microsite/a") 
    input(type="button", class="button white-button", value="A") 
    //- The | is followed by *two* spaces 
    | 
    a(href="#/microsite/p") 
    input(type="button", class="button white-button", value="P") 

當然，如果效果不理想，你還可以增加使用CSS padding和margin間距。

Answer 2

您是否在玉石中使用「漂亮」選項？如果你這樣做，關閉它，因爲HTML中的空白是非常不可靠的。