Haml与Rails：如何消除两段文本间的多余空格

嘿，我来帮你解决这个空格和布局的问题～

首先看你原来的代码，问题出在这几个地方：

1. 用span包裹多个p标签本身不符合语义——p是块级元素，默认会独占一行，强行用行内的span包裹它，浏览器渲染时会出现奇怪的布局问题
2. Haml的缩进规则会在同级元素之间生成额外的空格，这就是“says:”前面那两个空格的来源

给你调整后的代码，既能让用户名和“says:”同行显示，又能消除多余空格：

#comments
  %h2.comment_count= pluralize(@post.comments.count, "Comment")
  - @comments.each do |comment|
    .comment
      .comment-meta
        %span.username= comment.user.name
        %span.says says:
      %p.content= comment.content

调整说明： #

• 把原来的多个p标签换成了span：要让元素同行显示，行内元素（比如span）才是正确选择，p作为块级元素本来就该独占一行
• 新增了.comment-meta容器：把用户名和“says:”放在同一个容器里，既方便后续用CSS控制样式，也避免了Haml缩进带来的不必要空格
• 去掉了冗余的标签结构：“says:”只是一个辅助文本，不需要用p标签包裹，用span更合适

如果之后想调整用户名和“says:”之间的间距，直接用CSS的margin-left给.says加样式就好，比依赖HTML空格可控多啦～

内容的提问来源于stack exchange，提问作者Freddee