输入元件之间没有间隙（空间）角

Question

我的方形组件有选择器'app-square'：

<input type="text"/>

我有该组件的样式：

 input[type=text] {
      width: 40px;
      height: 40px;
      font-size: 15pt;
      text-align: center;
    }

我希望两个app-square元素之间没有差距。

<app-square></app-square>
<app-square></app-square>

现在，您可以注意到元素之间存在一些差距：

我不希望元素之间存在差距，我该如何实现呢？

Answer 1

正在生成将每个元素放在新行中。您可以通过将它们保持在同一行而不使用白色空格来删除它，如下所示：

'use strict';
module.exports = (sequelize, DataTypes) => {
  const Category = sequelize.define(
    'Category',
    {
      name: {
        allowNull: false,
        type: DataTypes.STRING
      },
      parent: { type: DataTypes.INTEGER }
    },
    {}
  );
  Category.associate = function(models) {
    models.Category.belongsTo(models.Category, {
      onDelete: 'CASCADE',
      foreignKey: 'parent'
    });
  };
  return Category;
};

或者使用CSS force：

<input type="text"/><input type="text"/><input type="text"/><input type="text"/><input type="text"/><input type="text"/>

Answer 2

这是由默认设置为display的{​​{1}}属性引起的。它增加了元素之间的差距。

因此，您可以使用否定inline-block，或代替margin浮动它们。

优先方式是浮动它们：

＆＃13;

＆＃13;

inline-block

＆＃13;

.container::before,
.container::after {
    display: table;
    content: " ";
    clear: both;
}

input {
  float: left;
  width: 40px;
  height: 40px;
  font-size: 15pt;
  text-align: center;
}

＆＃13;

＆＃13;

＆＃13;

请勿忘记使用浮动元素的<div class="container"> <input value="0" /> <input value="0" /> <input value="0" /> <input value="0" /> <input value="0" /> <input value="0" /> </div>上的css清除浮动元素。

container