HTML   发布时间:2022-04-14  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了html – DIV内BUTTON上方无法解释的空间大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
前言:我已经阅读了很多关于div内部图像的文章,周围有一个奇怪的空间,等等.

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

他们的问题看似相似但与我的不一样.在此示例文档中,边框,填充,轮廓等设置为零..但Opera和Firefox都在div顶部渲染一个备用像素.第三个可能在这个空间作弊,但没有人似乎回答为什么它在那里..

编辑:我读过很多文章,这些文章很接近于回答这个问题,但它们与实际问题似乎有些不同.

我错过了什么?这是我的第一个问题,请耐心等待:)

<!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>

是否有一些CSS3将使它全部工作?这是一个实验项目,欢迎使用最新的CSS3.

PS:我只关心Opera渲染,虽然Firefox会很好地支持相同的标准兼容代码..谢谢!

解决方法

将div上的行高更改为零.
div{
      background-color: #ffffff;
      line-height:0;
  }

jsFiddle example

大佬总结

以上是大佬教程为你收集整理的html – DIV内BUTTON上方无法解释的空间全部内容,希望文章能够帮你解决html – DIV内BUTTON上方无法解释的空间所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: