Home/ Questions/Q 8227097
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T16:00:32+00:00

Preface: I’ve read lots of articles about images inside a div having a strange

  • 0

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!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Change the line-height on the div to zero.

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

    jsFiddle example

    • 0