Input and button width puzzle!
Challenge: Make sure that both the text input and the button element line up.
Click the fish icon to make your own copy of this project. Edit input-and-button.css to make the fix. There is no need to change index.html.
- Scenario: The text input and the button element both have width of 100%.
- Problem: Both elements have the same width value, but they do not line up on the right.
- Problem: Changing width to 500px or to another measurement on both elements yields the same result. The pixels on the right don't line up.
Here are some hints:
-
Hint 1
-
Click Here to toggle a border around the form element. Zoom in on the right side of the box to see how the input and button relate to the border. It looks like the text input is wider than its container. Why would that be the case?
-
Hint 2
-
Measure how many pixels wide the text input takes vs. how many pixels wide the button element occupies. Go to style.css and change the width on the input and button element to 500px; There is still the mismatch.
-
Hint 3
-
Are there properties such as margin, padding, or border that your browser applies automatically?
-
Hint 4
-
What size or other properties might browsers be defaulting to? For example, almost every element in HTML defaults its "box-sizing" property to be "content-box". That means that the total width of an element is not only its width property but a sum of border-left, padding-left, width, padding-right, and border-right...
-
Hint 5
-
What do you find and see when you search a search engine for "HTML text input and button element not lining up with same width property in CSS"?
Solutions: