Reputation: 97691
I have two elements in a container:
<div class="container">
<span>This is a div</span>
<button>This is a button</button>
</div>
Styled as follows:
span, button {
display: block;
padding: 4px;
border: 1px solid black;
margin: 5px;
background: #c0c0c0;
font: inherit;
}
.container {
border: 1px solid black;
}
You can see a live demo here.
Why does the button not appear the same width as the span? How can I make the button behave like a standard block-level element?
I need to use a <button>
here because its purpose is to submit the form.
Upvotes: 7
Views: 7289
Reputation: 228302
I'm expecting there to be some ruleset that makes them both behave like
<div>
s
There isn't. The reason is that button
is a "replaced element".
The clearest source I could find on this was: http://reference.sitepoint.com/css/replacedelements
A replaced element is any element whose appearance and dimensions are defined by an external resource. Examples include images (
<img>
tags), plugins (<object>
tags), and form elements (<button>
,<textarea>
,<input>
, and<select>
tags). All other elements types can be referred to as non-replaced elements.Replaced elements can also have visual formatting requirements imposed by the element, outside of the control of CSS; for example, the user interface controls rendered for form elements.
Upvotes: 2
Reputation: 3891
How I corrected it: The padding for left and right is set but the all around its managed by the container The width is 100% for the button. Lastly the button's separation is managed by top 5px margin.
span, button {
display: block;
padding-top:4px;
padding-bottom:4px;
border: 1px solid black;
background: #c0c0c0;
font: inherit;
}
button{
margin-top:5px;
width:100%;
}
.container {
border: 1px solid black;
padding:5px;
}
Upvotes: 0
Reputation: 29625
This should do the trick. Live example: http://jsfiddle.net/925qz/18/
.container {
border: 1px solid black;
padding: 5px;
}
span, button {
display: block;
padding: 4px;
border: 1px solid black;
background: #c0c0c0;
font: inherit;
}
button{
width:100%;
margin-top: 5px;
text-align: left;
}
Upvotes: 2
Reputation: 8346
When you apply a width of 100% (like block elements usually have) to the button it will ignore the padding! I had this problem a few days ago:
<button> padding / width problem
If u want to fill out all of the width and apply padding, this should do the job:
button {
width: 100%;
/* prefixes for box-sizing here */
box-sizing: content-box;
}
Of course the total width will be 100% + the padding, so it'll be more than you want. You may have to take a fix width, because of that.
Upvotes: 0
Reputation: 11572
Form elements use a different box-model in pretty much every browser. That’s why they never actually have the same size as the other elements, even if all have the same dimensions set. I also found a bug report from Firefox for this problem: https://bugzilla.mozilla.org/show_bug.cgi?id=562153
I always put the following code in my reset stylesheet to have a more even working ground:
select, input, textarea, button {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
The code works from IE8 and up and all other major browsers, according to PPK: http://www.quirksmode.org/css/contents.html
Upvotes: 0
Reputation: 71970
Browsers often ship with divergent default styles for many elements. Header elements such as h1 and h2, ul, strong and em all are styled with default CSS. A general tactic is to use something like the Yahoo! reset css stylesheet to remove these styles for better cross-browser appearance.
This would not immediately help with your button problem, but partly explains it. Internally, complex elements within browsers such as the button are defined by HTML that you don't have access to as a user. This internal HTML is also styled via CSS. In the case of a button you'll have to use explicit CSS to style it in ways other than the browser has been instructed to. Give it a width
and understand that internal padding rules may give it divergent appearance from a div or span with similar rules.
Upvotes: 0
Reputation: 2579
Separate the span and button selectors, then add width to the button selector.
Upvotes: 1