-3

I have a simple website with 3 controls, yet somehow they are shown in a really weird way.

enter image description here

I've added the red background to show the gap. So far I've tried setting margin/padding to 0, also tried box-sizing but it changed only the width of these elements, didnt make the gaps go away.

@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>
JanRad
  • 327
  • 2
  • 12
  • As @dippas said, you need to post code, not just an image. It's impossible for us to know why the gap is there if we can't see the code that created it. – manwill Mar 04 '16 at 23:44
  • Alright, sorry for my mistake. Code is there now. – JanRad Mar 04 '16 at 23:46
  • Possible duplicate of [Image inside div has extra space below the image](http://stackoverflow.com/q/5804256/1529630). In your case you have an inline-level element which is not an image, but if I understand correctly your problem, it's the same reason. – Oriol Mar 05 '16 at 00:30

1 Answers1

0

Padding has nothing to do with it. You need to change how the browser displays the textarea.

Try updating your CSS for your chatBox element to this:

#chatBox {
    display: block; /* Add this line */
    resize: none;
    width: inherit;
}
manwill
  • 457
  • 4
  • 11