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: baseline
与vertical-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.
输出: