Unexplainable space above BUTTON inside DIV

StackOverflow https://stackoverflow.com/questions/11494512

سؤال

Preface: I've read lots of articles about images inside a div having a strange space around them, etc.

Example #1: Unwanted padding-bottom of a div
Example #2: https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps
Example #3: cannot eliminate space between 2 horizontal divs inside containing div

Their issues seems similar but not identical to mine. In this sample document, the border, padding, outline, etc are set to zero .. yet both Opera and Firefox render a spare pixel at the top of the div. The third may cheat a way around this space but nobody seems to answer why it's there..

Edit: I read MANY articles that are temptingly close to answering this, but they all seem slightly different with the actual issue.

What am I missing? It's my first question so be patient please :)

<!doctype html>
<html>
  <head>
    <title>Anger</title>
    <style>
      *{
        cursor: default;
        margin: 0;
        outline: 0;
        border: none;
        padding: 0;
        text-decoration: none;
      }
      body{
        background-color: #87cefa;
      }
      div{
        background-color: #ffffff;
      }
      button{
        border-radius: 9px;
        padding: 1px 6px 2px 6px;
        font: 14px monospace;
        color: #ffffff;
        background-color: #1e90ff;
      }
    </style>
  <head>
  <body>
    <div>
      <button>Sample Button</button>
    </div>
  </body>
<html>

Is there some CSS3 that will make it all work? This is an experimental project, so the latest CSS3 is welcomed.

PS: I only care about the Opera rendering, though Firefox would be nice to support with the same standards compliant code.. Thanks!

هل كانت مفيدة؟

المحلول

Change the line-height on the div to zero.

  div{
      background-color: #ffffff;
      line-height:0;
  }

jsFiddle example

نصائح أخرى

Set vertical-align to top on the button. That will fix it.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top