Why does my input box have mystery space around it? According to developer tools inspection there is no padding or margin that would because it to not be right next to the button. The button is several px above the input and I would like to have them together like in this codepen:
http://codepen.io/ChynoDeluxe/pen/pJxOQE/?editors=0010
I think it may be a browser default for inputs but I am unsure. The pen uses SCSS and I am trying to do it with CSS3 if possible. Here's my code:
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script type="text/javascript"></script>
<style>
#wrapper {
width: 300px;
margin-left: auto;
margin-right: auto;
font: 1em Helvetica, Arial, Sans-serif;
}
#error {
/* display: none; */
background: rgba(237, 28, 36, .7);
color:#fff;
padding: 14px;
margin-bottom: 10px;
border-radius: 10px;
text-align: center;
font-size: 1.1em;
}
#inputItem {
background: rgba(31, 41, 51, .9);
color: #fff;
padding: 14px;
text-align: center;
font-size: .9em;
width: 225px;
border: none;
}
#form-header {
display: inline;
}
#addItemButton {
background: #0066cc;
color: #fff;
font-size: 1.75em;
border: none;
padding: 5px;
width: 40px;
}
</style>
</head>
<body>
<div id="wrapper" class="itemizer">
<div id="error" class="error">Please enter an item!</div>
<div id="form-header" class="form-header">
<input type="text" id="inputItem" placeholder="What are you looking for?" />
<button id="addItemButton">+</button>
</div>
<div class="itemizer-body">
<ul id="items"></ul>
</div>
</div>
Aucun commentaire:
Enregistrer un commentaire