Open In App

How to get rid of an element offset using CSS ?

Improve
Improve
Like Article
Like
Save
Share
Report

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:




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


Output:



Last Updated : 20 May, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads