📜  如何使用 CSS 去除元素偏移量?

📅  最后修改于: 2021-10-29 06:07:36             🧑  作者: Mango

CSS 有能力根据开发人员的选择使屏幕看起来。如果未正确对齐,偏移设置总是会出现问题。由于浏览器的默认 x、y 坐标,可能会出现此问题。

我们将尝试使用示例来清除偏移概念。请参考下图。

例子:

方法:上图中显示的偏移量为 28,它表示您的网络浏览器根据元素的位置 CSS 属性估计的 x 和 y 坐标。在任何元素之前插入
会改变偏移量。例如,您可以通过以下方式将其设置为 0:

句法:

#inputBox {
    position: absolute;
    top: 0px;
    left: 0px;
}

或者

#inputBox {
    position: relative;
    top: -top margin px;
    left: -left margin px;
}

另一个原因可能是导致顶部偏移vertical-align: baselinevertical-align: top设置vertical-align: top ,语法如下:

句法:

position: relative;
top: -top margin px;
left: -left margin px;

按照用语来说,top、left、right、bottom就是CSS偏移属性(properties)。通常,它们用于将元素定位在所需位置(使用绝对或固定定位),或者相对于它们的默认位置移动它们(使用相对定位)。

在顶部显示的图像中,我们将值设置为 -28px 和 -10px 以在语法中管理该坐标。

#inputBox {
    position: relative;
    top: -28px;
    left: -10px;
}

或者

position: relative;
top: -28px;
left: -10px;

输出:

完整代码:



  

    

  

  
    

GeeksforGeeks Outline Offset

       
        This div has a 4 pixels solid          red outline 15 pixels outside          the border edge.     
    
       
        This div has a 5 pixels dashed          blue outline 5 pixels outside          the border edge.     
  

输出: