浮動小数点の右余白：正しい項目ですか？

Question

私はHTMLのこのビットを持っている：

<div id="content"> 
    <h1 id="prompt">What's on your mind?</h1> 

    <form action="post.php" method="POST" id="message-form"> 
     <textarea placeholder="Type in anything you want to share. Anything at all."></textarea> 
     <p>Feel free to type up to <span id="character-count">2000 characters</span>, or to use <a href="http://daringfireball.net/projects/markdown/syntax">Markdown</a> formatting.</p> 
     <input type="submit" class="submit button" value="Share" /> 
     <br class="clearfix" /> 
    </form> 
</div> 

と、このCSS：

/* CSS Reset 
-------------------------------------------*/ 
* { 
    margin: 0; 
    padding: 0; 
} 

.clearfix { 
    clear: both; 
} 

/* UI Elements 
-------------------------------------------*/ 
.button { 
    background-color: #ccc; 
    background-image: -webkit-linear-gradient(white, #ccc); 
    background-image: -moz-linear-gradient(white, #ccc); 
    background-image: -ms-linear-gradient(white, #ccc); 
    background-image: -o-linear-gradient(white, #ccc); 
    background-image: linear-gradient(white, #ccc); 
    border: 1px solid #999; 
    border-radius: 10px; 
    color: #333; 
    cursor: pointer; 
    font-family: Arial, Helvetica, Sans-serif; 
    font-size: 13px; 
    outline: none; 
    padding: 3px 8px; 
    text-decoration: none; 
} 

.button:hover { 
    border-color: #666; 
} 

.button:active { 
    background-color: #bbb; 
    background-image: -webkit-linear-gradient(#ccc, white); 
    background-image: -moz-linear-gradient(#ccc, white); 
    background-image: -ms-linear-gradient(#ccc, white); 
    background-image: -o-linear-gradient(#ccc, white); 
    background-image: linear-gradient(#ccc, white); 
} 

/* Content 
-------------------------------------------*/ 
#content { 
    margin: 10px; 
} 

/* Prompt 
-------------------------------------------*/ 
#prompt { 
    color: #888; 
    font-weight: normal; 
} 

/* Message Box 
-------------------------------------------*/ 
#message-form { 
    width: 600px; 
} 

#message-form textarea { 
    border: 1px solid #ccc; 
    border-radius: 6px; 
    display: block; 
    font-family: Georgia, Times New Roman, Times, Serif; 
    font-size: 16px; 
    min-height: 100px; 
    outline: none; 
    padding: 5px; 
    resize: vertical; 
    width: 100%; 
    -webkit-transition: border-color 0.25s ease-in-out; 
    -moz-transition: border-color 0.25s ease-in-out; 
    -ms-transition: border-color 0.25s ease-in-out; 
    -o-transition: border-color 0.25s ease-in-out; 
    transition: border-color 0.25s ease-in-out; 
} 

#message-form textarea:hover { 
    border-color: #666; 
} 

#message-form textarea:focus { 
    border-color: #3bf; 
    box-shadow: 0 0 5px #3bf; 
} 

#message-form p { 
    color: #666; 
    float: left; 
    font-size: 13px; 
    margin: 3px; 
} 

#message-form .submit { 
    float: right; 
    margin-right: 0; 
} 

私が達成しようとしている何が宇宙の特定の量の中に右方向の要素をfloatにあります。これは動作しますが、存在しないように見えるボタンの右側に約10ピクセルのスペースがあります。それは親要素からパディングされていないし、ボタンの余白も私が見る限り...そうどこから来ている？以下はその問題のイメージです。完全なコードはhttps://github.com/minitech/MiniTicketです。コードの過負荷のために申し訳ありません

Here's a demo on jsFiddle, too.

が、I can't seem to reproduce the problem in a simple way。

Answer 1

は、（それがパディングは要素の内側に適用されるinput要素、でない限り）width: 100%と水平paddingの任意の量を設定すると、あなたの要素が100％を超えて幅を持たせることに留意してください。

あなたの場合、textareaの幅は610pxです。送信ボタンは、600ピクセル幅のコンテナの右端に正しく浮かびます。

参照：テキストエリアでのパディングのためhttp://jsfiddle.net/Wexcode/KX7wd/1/

交換：http://jsfiddle.net/Wexcode/KX7wd/2/