Question

我开始使用Polymer，尽管事实上我确实看到了它的强大功能，但我一直在努力解决一个奇怪的问题。我有一个＆＃34;鬼魂空间＆＃34; （在我的项目中每个Polymer元素之间看起来像一个边距）。当我在Chrome开发工具中检查它们时，它们的计算边距和填充总是归零（如预期的那样）。但是，即使它们之间的空白也是如此。我还检查了所有内部元素（没有很多，因为我刚开始并且我还在尝试它），所有这些都没有填充和边距，我仍然有元素之间的这个鬼差。在我的最上面的元素和文档正文标记之间设置了同样奇怪的，无法识别的，未定义的边距。

发生了什么事？我错过了什么？

顺便说一句，我使用Polymer CLI来为我的开发环境提供服务。也许这可能是聚合物服务命令的错误......

以下是代码：

应用程序/ index.html的

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">

    <script src="/bower_components/webcomponentsjs/webcomponents-lite.js"></script>

    <link rel="manifest" href="/manifest.json">
    <link rel="import" href="/src/myapp-app/myapp-app.html">
    <link rel="stylesheet" href="/src/css/main.css">
  </head>
  <body>
    <myapp-app></myapp-app>
  </body>
</html>

应用程序/ SRC / MyApp的应用内/ MyApp的-app.html

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="myapp-header.html">
<link rel="import" href="myapp-content/myapp-content.html">
<link rel="import" href="myapp-footer.html">

<dom-module id="myapp-app">
  <template>
    <style type="text/css">
    :host {
      display: block;
      position: relative;
      top: 0;
      left: 0;
      min-height: 100vh; }

    </style>

    <myapp-header></myapp-header>
    <myapp-content></myapp-content>
    <myapp-footer></myapp-footer>
  </template>
  <script>
    Polymer({
      is: 'myapp-app'
    });
  </script>
</dom-module>

应用程序/ SRC / MyApp的应用内/ MyApp的-header.html中

<link rel="import" href="../../bower_components/polymer/polymer.html">

<dom-module id="myapp-header">
  <template>
    <style type="text/css">
    :host {
      display: block; }

    </style>

    <h1>A header</h1>
  </template>
  <script>
    Polymer({
      is: 'myapp-header',
      properties: {},
    });
  </script>
</dom-module>

应用程序/ SRC / MyApp的应用内/ MyApp的含量/ MyApp的-content.html

<link rel="import" href="../../../bower_components/polymer/polymer.html">

<dom-module id="myapp-content">
  <template>
    <style type="text/css">
    :host {
      display: block; }

    </style>

    <h1>Content</h1>
  </template>
  <script>
    Polymer({
      is: 'myapp-content',
      properties: {},
    });
  </script>
</dom-module>

应用程序/ SRC / MyApp的应用内/ MyApp的-footer.html

<link rel="import" href="../../bower_components/polymer/polymer.html">

<dom-module id="myapp-footer">
  <template>
    <style type="text/css">
    :host {
      display: block;
      position: absolute;
      height: 10vh;
      bottom: 0;
      left: 0; }

    </style>

    <h1>A footer</h1>
  </template>
  <script>
    Polymer({
      is: 'myapp-footer',
      properties: {},
    });
  </script>
</dom-module>

Answer 1

是的，正如我想象的那样，我的错误是真的＆＃34; nooby＆＃34;一。我的元素标签有一个＆＃34;鬼＆＃34;空间，因为它们内部的h1标签设置了边距。事实上，根本没有鬼魂，只有我的＆＃34; newbines＆＃34;。 = X

聚合物元素之间的奇怪空间/边距

1 个答案: