Css div宽度不正确
我按照本教程创建聊天服务器： 无论出于何种原因，我的程序中的文本区域和输入区域不符合300px的正确宽度。在过去的两个小时里，我检查了类似的线索，忽略了这段视频，寻找打字错误。那么为什么我的两个组件不符合300px？我下载了一个chrome标尺应用程序，它们的测量值是280px而不是300px。 我是css的noob，所以请指出我的任何不好的代码实践 代码如下：Css div宽度不正确,css,width,Css,Width,我按照本教程创建聊天服务器： 无论出于何种原因，我的程序中的文本区域和输入区域不符合300px的正确宽度。在过去的两个小时里，我检查了类似的线索，忽略了这段视频，寻找打字错误。那么为什么我的两个组件不符合300px？我下载了一个chrome标尺应用程序，它们的测量值是280px而不是300px。 我是css的noob，所以请指出我的任何不好的代码实践 代码如下： <!DOCTYPE hmtl> <html> <head> <title>
<!DOCTYPE hmtl>
<html>
<head>
<title>Chat</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body class = "body">
<div class="chat">
<input type ="text" class = "chat-name" placeholder= "Enter Your Name">
<div class = "chat-messages">
</div>
<textarea placeholder= "Type Your Message"></textarea>
<div class = "chat-status"> Status: <span>Idle</span></div>
</div>
</body>
</html>
body, textarea, input
{
font: 14px "Trebuchet MS", sans-serif;
}
.chat{
max-width: 300px;
}
.chat-messages, .chat-name, .chat textarea {
border: 1px solid #bbb;
}
.chat-messages {
width: 100%;
height: 300px;
overflow-y: scroll;
padding: 10px;
}
.chat-name {
width: 100%;
padding: 10px;
border-bottom: 0;
margin: 0;
}
.chat textarea {
width: 100%;
padding: 10px;
border-top: 0;
margin: 0;
max-width: 100%;
}
.chat-status {
color: #bbb;
}
.chat textarea, .chat-name{
outline: none;
}
聊天
状态：空闲
正文，文本区，输入
{
字体：14px“投石机MS”，无衬线；
}
.聊天{
最大宽度：300px；
}
.聊天信息、.聊天室名称、.聊天室文本区{
边框：1px实心#bbb；
}
.聊天信息{
宽度：100%；
高度：300px；
溢出y：滚动；
填充：10px；
}
.聊天室名称{
宽度：100%；
填充：10px；
边界底部：0；
保证金：0；
}
.聊天区{
宽度：100%；
填充：10px；
边界顶部：0；
保证金：0；
最大宽度：100%；
}
.聊天状态{
颜色：#bbb；
}
.chat text区域，.chat name{
大纲：无；
}
编辑#2：所以它在JFIDLE上工作，在其他一些用户的计算机上工作，但在我的计算机上不工作。我有这个精确的代码副本并粘贴在我的编辑器中 删除.chat\u message类的
宽度：100%