How to get rid of an element offset using CSS ?

CSS has the power to make the screen look as per the developer’s choice. Offset setting always ends up in a problem when not aligned properly. This issue may arise due to the default x, y coordinates by the browser.

We will try to clear the offset concept using an example. Refer to the following image.

Example:

Approach: The offset shown in the above image is 28, it represents the x and y coordinates that your web-browser has estimated for the element according to it’s position CSS attributes. Inserting <br> before any element would change the offset. For example, you could set it to 0 by:

Syntax:



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

or

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

Another reason can be the vertical-align: baseline vs vertical-align: top that was causing the top offset. Set the vertical-align: top, as shown below syntax:

Syntax:

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

According to the phraseology, top, left, right, and the bottom is CSS offset attributes(properties). usually, they are used for positioning elements at a required location (using absolute or fixed positioning), or to move them relative to their default location (using relative positioning).

In the Image shown on top, we would put the values as -28px and -10px to manage that coordinates in syntax.

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

or

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

Output:

Complete Code:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <style>
        div.ex1 {
            margin: 10px;
            border: 1px solid black;
            background-color: grey;
            outline: 5px dashed red;
            outline-offset: 5px;
        }
  
        div.ex2 {
            margin: 20px;
            border: 1px solid black;
            background-color: grey;
            outline: 4px solid green;
            outline-offset: 15px;
        }
    </style>
</head>
  
<body>
  
    <h1>GeeksforGeeks Outline Offset</h1>
  
    <div class="ex1">
        This div has a 4 pixels solid 
        red outline 15 pixels outside 
        the border edge.
    </div>
    <br>
  
    <div class="ex2">
        This div has a 5 pixels dashed 
        blue outline 5 pixels outside 
        the border edge.
    </div>
</body>
  
</html>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Enthusiast Technical Content Writer

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.