CSS: Display:Block + Width:Auto

Hi Guys,

I am trying to simulate a button using CSS,

I want the hyperlink to have padding on all 4 sides, but I want the block to only be as wide as the text plus the padding. I thought that width:inherit would work with display:block but it does not.

Any Idea’s?

a.button:link, a.button:visited {
		border-left:2px solid #EFA96C;
		border-top:2px solid #EFA96C;
		border-right: 2px solid #AE5C13;
		border-bottom:2px solid #AE5C13;
		font-size:1em; margin:5px;
		padding:10px 10px 10px 10px;
	a.button:hover {
<a href="#" class="button">Go</a>


  • Get rid of the width: 50px
  • change display to inline-block

If you really need to have them displayed as block elements, then consider putting them in a list:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
		<style type="text/css" media="all">
			a.button:link, a.button:visited {
				background-color: #f90;
				color: #fff;
				font-weight: bold;
				border-left: 2px solid #efa96c;
				border-top: 2px solid #efa96c;
				border-right: 2px solid #ae5c13;
				border-bottom: 2px solid #ae5c13;
				font-size: 1em;
				margin: 5px;
				text-decoration: none;
				padding: 0.7em;
			a.button:hover {
				text-decoration: underline;
			li {
				height: 3em;
		<a href="#" class="button">Go</a>
		<a href="#" class="button">Stop</a>
		<ul style="list-style: none; padding: 0; margin: 0">
			<li><a href="#" class="button">Go</a></li>
			<li><a href="#" class="button">Stop</a></li>

Hi xangelusx, thanks for the responces …

I went with the inline-block solution except it does not work in IE5, is there a reaosn for this?


Off the top of my head, maybe inline-block isn’t supported in IE 5. You can try just leaving the display attribute undeclared, which will make it the default “inline” and should achieve the same effect.