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元素之間的奇怪空間

回答

相關問題