英文:
The size of my input field and button with same width and height appears different
问题
以下是翻译好的内容：
<!-- 开始代码片段：js 隐藏：false 控制台：true Babel：false -->
<!-- 语言：lang-css -->
html, body {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Rubik', sans-serif;
background-color: #EEF0F4;
}
input {
margin-top: 13px;
color: #432000;
background-color: #DCE1EB;
border: none;
border-radius: 7px;
width: 10em;
height: 3em;
}
button {
margin-top: 13px;
color: #FDFDFD;
background-color: #AC485A;
border: none;
border-radius: 7px;
width: 10em;
height: 3em;
}
<!-- 语言：lang-html -->
<div id="main">
<img src="assets/cat.png" alt="cat image">
<input type="text" id="input-field" placeholder="Bread">
<button id="add-button">Add to cart</button>
</div>
<!-- 结束代码片段 -->
我无法解决内部盒模型在这两种情况下使用不同尺寸的问题。
英文:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
html, body {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Rubik', sans-serif;
background-color: #EEF0F4;
}
input {
margin-top: 13px;
color: #432000;
background-color: #DCE1EB;
border: none;
border-radius: 7px;
width: 10em;
height: 3em;
}
button {
margin-top: 13px;
color: #FDFDFD;
background-color: #AC485A;
border: none;
border-radius: 7px;
width: 10em;
height: 3em;
}
<!-- language: lang-html -->
<div id="main">
<img src="assets/cat.png" alt="cat image">
<input type="text" id="input-field" placeholder="Bread">
<button id="add-button">Add to cart</button>
</div>
<!-- end snippet -->
input field box model
button box model
I can't resolve as to why the innermost aspect/element in box model is using different sizes for the two cases.
答案1
得分: 1
问题很可能是由浏览器而不是CSS引起的。
因为现代浏览器喜欢首先添加自己的自定义样式，许多开发人员喜欢使用重置CSS来删除这些浏览器样式。你可以参考重置CSS。
另外，你可以参考Eric Meyer的重置CSS 2。
最简单的修复方法是添加box-sizing: border-box;，因为问题实际上是从这里引起的。
现在它们的大小是一样的：
输入框：
按钮：
英文:
The issue is likely coming from your browser and not your CSS.
Because modern browsers like to add in their own custom styling first, many developers like to remove this browser styling with a reset CSS
See also Eric Meyer's Reset CSS 2
The simplest fix is to add box-sizing: border-box; as this is where the issue is actually coming from.
<!-- begin snippet: js hide: false console: true babel: null -->
<!-- language: lang-css -->
html,
body {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Rubik', sans-serif;
background-color: #EEF0F4;
}
input {
margin-top: 13px;
color: #432000;
background-color: #DCE1EB;
border: none;
border-radius: 7px;
width: 10em;
height: 3em;
box-sizing: border-box;
}
button {
margin-top: 13px;
color: #FDFDFD;
background-color: #AC485A;
border: none;
border-radius: 7px;
width: 10em;
height: 3em;
box-sizing: border-box;
}
<!-- language: lang-html -->
<div id="main">
<img src="assets/cat.png" alt="cat image">
<input type="text" id="input-field" placeholder="Bread">
<button id="add-button">Add to cart</button>
</div>
<!-- end snippet -->
Now they are sized the same:
Input:
Button:
答案2
得分: 0
你应该使用像素（px）作为单位，这样高度就会是必需的相同值。
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
html,
body {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Rubik', sans-serif;
background-color: #EEF0F4;
}
input {
margin-top: 13px;
color: #432000;
background-color: #DCE1EB;
border: none;
border-radius: 7px;
width: 10em;
height: 40px; // 使用像素（px）单位
}
button {
margin-top: 13px;
color: #FDFDFD;
background-color: #AC485A;
border: none;
border-radius: 7px;
width: 10em;
height: 40px; // 使用像素（px）单位
}
<!-- language: lang-html -->
<div id="main">
<img src="assets/cat.png" alt="cat image">
<input type="text" id="input-field" placeholder="Bread">
<button id="add-button">Add to cart</button>
</div>
<!-- end snippet -->
英文:
You should use px so the height will be the same mandatory
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
html,
body {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Rubik', sans-serif;
background-color: #EEF0F4;
}
input {
margin-top: 13px;
color: #432000;
background-color: #DCE1EB;
border: none;
border-radius: 7px;
width: 10em;
height: 40px; //use the px unit
}
button {
margin-top: 13px;
color: #FDFDFD;
background-color: #AC485A;
border: none;
border-radius: 7px;
width: 10em;
height: 40px; //use the px unit
}
<!-- language: lang-html -->
<div id="main">
<img src="assets/cat.png" alt="cat image">
<input type="text" id="input-field" placeholder="Bread">
<button id="add-button">Add to cart</button>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论