float上不存在的右邊距：右邊的項目？

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; 
} 

我試圖完成對空間的特定量內浮動向右的元素。這可行，但按鈕右側大約有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

請記住，設置width: 100%和任意數量的水平padding將使您的元素的寬度超過100％（除非它是一個input元素，其中填充應用於元素內部）。

在你的情況下，你的textarea寬度是610px。提交按鈕正確地浮動到您的600px寬度容器的最右側。

見：在textarea的http://jsfiddle.net/Wexcode/KX7wd/1/

置換填充：http://jsfiddle.net/Wexcode/KX7wd/2/