標籤和輸入寬度與css不一樣

我有這個頁面和它的css在這裏，我爲標籤和輸入定義了相同的寬度，但它們在瀏覽器上以不同的寬度顯示，爲什麼會發生這種情況？標籤和輸入寬度與css不一樣

html, body{ 
 
    font-family: Consolas; 
 
    font-size: 12px; 
 
} 
 

 
label{ 
 
    display: block; 
 
    border:1px solid rgb(230,230,230); 
 
    width: 200px; 
 
    padding: 10px; 
 
} 
 

 
input[type=text]{ 
 
    font-family: inherit; //without this the font is default 
 
    font-size: inherit; //without this the font is default 
 
    display: block; 
 
    border:1px solid rgb(230,230,230); 
 
    width: 200px; 
 
    padding: 10px; 
 
}

<html> 
 
    <head> 
 
    <link rel="stylesheet" href="input.css"> 
 
    </head> 
 
    <body> 
 
    <form> 
 
     <label>USER NAME</label> 
 
     <input type="text" placeholder="USER NAME" name="user_name"/> 
 
    </form> 
 
    </body> 
 
</html>

我是個初學者，所以請幫助我。

來源

2016-11-18 john smith

工作完美。什麼是問題？看到示例https://jsfiddle.net/patelsumit5192/qdfnek77/ –

它在這裏工作得很好，你可以附上它在瀏覽器上呈現的截圖嗎？ – mrid

但在我的谷歌瀏覽器中，輸入框小於標籤！ –

在某些瀏覽器，默認箱尺寸是「邊界框」，它的意思是：

寬度=內容寬度+邊框寬度+填充寬度

在這樣的瀏覽器

您的標籤是220px

但是在其他國家，默認箱上漿是「內容的盒子」，它意味着：

寬度=內容寬度

在這種瀏覽器中的標籤是200像素

所以只是把盒子上漿的所有元素：

*{ 

    -webkit-box-sizing: border-box ; 

    -moz-box-sizing: border-box ; 

    box-sizing: border-box; 

}

或

*{ 

    -webkit-box-sizing: content-box ; 

    -moz-box-sizing: content-box ; 

    box-sizing: content-box; 

}

集此只對標籤也沒關係，但設置對於所有人來說很容易收費

來源

2016-11-18 05:49:59

非常感謝王赤彪，我會記住這個！謝謝大家關心我的問題 –

使用樣式屬性「box-sizing：border-box;」爲標籤。

label { 
display: block; 
border: 1px solid rgb(230,230,230); 
width: 200px; 
padding: 10px; 
box-sizing: border-box; 
}

來源

2016-11-18 05:33:19 Jon

你能告訴我爲什麼我的工作不正常嗎？ –

我已經在我的html中添加了<！DOCTYPE html>，那麼一切都很好。但作爲一個更精簡的人，我想知道爲什麼沒有<！DOCTYPE html>不能正常工作，任何人都可以向我解釋一下嗎？ –

標籤和輸入寬度與css不一樣

回答

相關問題