Question

我有一个简单的网站，有3个控件，但不知怎的，它们以非常奇怪的方式显示。

我添加了红色背景以显示差距。到目前为止，我已尝试将margin / padding设置为0，也尝试使用box-sizing，但它只改变了这些元素的宽度，并没有消除间隙。

＆＃13;

@font-face {
  font-family: KongText;
  src: url('kongtext.ttf');
}
body {
  background-color: Highlight;
  font-family: KongText
}
h1 {
  font-size: 4em;
  text-align: center;
}
/*default.cshtml*/

#creator {
  width: 350px;
  margin: auto;
  margin-top: 10%;
  display: flex;
}
#joinRoom {
  background-color: coral;
  height: 50px;
  width: 346px;
  font-size: 30px;
  display: none;
}
#creatorButtons {
  width: 350px;
  margin: auto;
}
#join {
  background-color: coral;
  width: 350px;
  height: 50px;
  font-family: KongText;
  font-size: 1.4em;
}
#create {
  background-color: coral;
  width: 350px;
  height: 50px;
  font-family: KongText;
  font-size: 1.3em;
  margin-top: 1px;
}
#footer {
  font-size: 13px;
  position: fixed;
  bottom: 0;
  right: 0;
}
/*room.cshtml*/

#chat {
  width: 300px;
  margin: 0 auto;
}
#chatBox {
  resize: none;
  width: inherit;
}
#message {
  width: inherit;
}
#msgSend {
  width: inherit;
}

＆＃13;

<body>
  <div id="container">
    <div id="header">
      <h1>Chat Together 826</h1>
    </div>
    <div id="main">




      <div id="chat">
        <textarea id="chatBox" rows="40" cols="50" readonly="readonly"></textarea>
        <input type="text" id="message" placeholder="Your message" />
        <input type="button" id="msgSend" value="Send" />
      </div>


    </div>
    <div id="footer">
      &copy; 2016 Chat Together
    </div>
  </div>

</body>

</html>

＆＃13;

Answer 1

Padding与它无关。您需要更改浏览器显示textarea的方式。

尝试将chatBox元素的CSS更新为：

#chatBox {
    display: block; /* Add this line */
    resize: none;
    width: inherit;
}

html元素之间的奇怪空格

1 个答案: