html元素之间的奇怪空间

-3

我有一个简单的网站有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"> 
 
     &copy; 2016 Chat Together 
 
    </div> 
 
    </div> 
 

 
</body> 
 

 
</html>

来源

2016-03-04 JanRad

后代码，而不是 – dippas

作为@dippas说，你需要张贴代码，而不是只是一个形象。如果我们无法看到创建它的代码，那么我们就不可能知道为什么存在差距。 – manwill

好的，对不起，我的错误。代码现在在那里。 – JanRad

填充无关吧。您需要更改浏览器显示textarea的方式。

尝试更新你的CSS你客舱的元素添加到：

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

来源

2016-03-05 00:25:47 manwill

很棒。非常感谢你。 – JanRad

请标记为正确，以便其他有类似问题的人可以快速找到答案。 – manwill

html元素之间的奇怪空间

回答

相关问题