html元素之间的奇怪空间
问题描述:
我有一个简单的网站有3个控件,但不知何故,它们显示在一个非常奇怪的方式。html元素之间的奇怪空间
我已经添加了红色背景显示的差距。到目前为止,我已经尝试将margin/padding设置为0,也尝试了box-sizing,但它只改变了这些元素的宽度,没有让间隙消失。
@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;
}
<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">
© 2016 Chat Together
</div>
</div>
</body>
</html>
后代码,而不是 – dippas
作为@dippas说,你需要张贴代码,而不是只是一个形象。如果我们无法看到创建它的代码,那么我们就不可能知道为什么存在差距。 – manwill
好的,对不起,我的错误。代码现在在那里。 – JanRad