CSS width different for button and div elements

2018-06-29 03:27:09

I'm trying to figure out what it is about the button element that causes the CSS width attribute to be treated as the button's entire width, including the padding and border widths. CSS generally has width defining the content width, the width of the box inside the padding, and the browsers (IE, Firefox, Chrome on Windows 7, at least) abide by that for div s.

In my example below, I style a button and a div to look alike (and with a hover effect) but, for the div , I use width to specify the width of the content area alone. So even though the two buttons occupy the same width overall, the CSS width for the button is 190px while the CSS width is 152px (or 150px on hover).

(The result is the same with or without the display: inline-block that I added to the CSS for the div to try to match the browser's display property for the button .)

The result:

Any insights?

<html>
    <style>
        .xbutton {
            width: 190px;
            text-align: left;
            background: -webkit-linear-gradient(#eaf2f5, #e0eaee); /* For Safari 5.1 to 6.0 */
            background: -o-linear-gradient(#eaf2f5, #e0eaee); /* For Opera 11.1 to 12.0 */
            background: -moz-linear-gradient(#eaf2f5, #e0eaee); /* For Firefox 3.6 to 15 */
            background: linear-gradient(#eaf2f5, #e0eaee); /* Standard syntax */
            border: 1px solid #88949a;
            border-radius: 5px;
            padding: 8px 18px 8px 18px;
            font-family: Arial;
            font-size: 14px;
            color: #000000;
        }

        .xbutton:hover {
            background: -webkit-linear-gradient(#d2e0e8, #b8c3c9); /* For Safari 5.1 to 6.0 */
            background: -o-linear-gradient(#d2e0e8, #b8c3c9); /* For Opera 11.1 to 12.0 */
            background: -moz-linear-gradient(#d2e0e8, #b8c3c9); /* For Firefox 3.6 to 15 */
            background: linear-gradient(#d2e0e8, #b8c3c9); /* Standard syntax */
            border: 2px solid #7b888e;
            padding: 8px 16px 8px 20px;
        }

        .xbutton-icon {
            margin: 0 7px 0 0;
            vertical-align: middle;
        }

        div.xbutton { display: inline-block; width: 152px; }
        div.xbutton:hover { width: 150px; }
     </style>


    <title>Button test</title>
    <div><button class="xbutton"><img class="xbutton-icon" src="GetFileAttachment.png" width="25" height="18">Email attachment</button></div>
    <div class="xbutton"><img class="xbutton-icon" src="GetFileAttachment.png" width="25" height="18">Email attachment</div>
</html>

you need to reset button css style which is defined by default in a different way for each browser.

/*fix for Firefox */
button::-moz-focus-inner{
  border: 0;
  padding: 0;
}

/*reset button CSS */
button{
  margin: 0;
  padding: 0;
  border: none;
  font: inherit;
  box-sizing: border-box;
}

Snippet:

/*fix for Firefox */

button::-moz-focus-inner {
  border: 0;
  padding: 0;
}
/*reset button CSS */

button {
  margin: 0;
  padding: 0;
  border: none;
  font: inherit;
  box-sizing: border-box;
}
.xbutton {
  width: 190px;
  text-align: left;
  background: -webkit-linear-gradient(#eaf2f5, #e0eaee);
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#eaf2f5, #e0eaee);
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#eaf2f5, #e0eaee);
  /* For Firefox 3.6 to 15 */
  background: linear-gradient(#eaf2f5, #e0eaee);
  /* Standard syntax */
  border: 1px solid #88949a;
  border-radius: 5px;
  padding: 8px 18px 8px 18px;
  font-family: Arial;
  font-size: 14px;
  color: #000000;
}
.xbutton:hover {
  background: -webkit-linear-gradient(#d2e0e8, #b8c3c9);
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#d2e0e8, #b8c3c9);
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#d2e0e8, #b8c3c9);
  /* For Firefox 3.6 to 15 */
  background: linear-gradient(#d2e0e8, #b8c3c9);
  /* Standard syntax */
  border: 2px solid #7b888e;
  padding: 8px 16px 8px 20px;
}
.xbutton-icon {
  margin: 0 7px 0 0;
  vertical-align: middle;
}
div.xbutton {
  display: inline-block;
  width: 152px;
}
div.xbutton:hover {
  width: 150px;
}

<title>Button test</title>
<div>
  <button class="xbutton">
    <img class="xbutton-icon" src="http://lorempixel.com/25/18" width="25" height="18">Email attachment</button>
</div>
<div class="xbutton">
  <img class="xbutton-icon" src="http://lorempixel.com/25/18" width="25" height="18">Email attachment</div>

链接地址: http://www.djcxy.com/p/81364.html

上一篇: 块元素的宽度由其内容设置？

下一篇: 按钮和div元素的CSS宽度不同