When elements are hovered over, they shift due to the addition of borders. Contrary to suggestions from elsewhere, padding does not seem to have

Question

When elements are hovered over, they shift due to the addition of borders. Contrary to suggestions from elsewhere, padding does not seem to have

I have a dilemma with my testing website. Whenever I hover over a certain area, a border gets added which causes other elements to move around. I tried adjusting the padding as suggested in some posts, but it didn't solve the issue because it collided with other content.

Here is where I set the border:

#logo:hover {
  border: 2px solid cyan;
}

And this is the section it was applied to:

#logo {
    width: 200px;
    height: 200px;
    position: relative;
    top: 80px;
    line-height: 12em;
    border-radius: 200px;
    margin: 0 10px 0 10px;
    overflow: hidden;
}

If anyone has a solution or advice on how I framed my question, please let me know.

#logo {
    background-color: black;
    width: 200px;
    height: 200px;
    position: relative;
    top: 80px;
    line-height: 12em;
    border-radius: 200px;
    margin: 0 10px 0 10px;
    overflow: hidden;
}

#logo:hover {
  border: 2px solid cyan;
}

<div id=logo></div>

Best regards, TheWombatGuru

html css hover border

Answer 1

Answer №1

Another option is to incorporate box shadow:

 #logo{
    box-shadow: inset 0 0 0 1px cyan;
 }

 #logo:hover {
    box-shadow: inset 0 0 0 2px cyan;
 }

Answer 2

Another option is to incorporate box shadow:

 #logo{
    box-shadow: inset 0 0 0 1px cyan;
 }

 #logo:hover {
    box-shadow: inset 0 0 0 2px cyan;
 }

Answer 3

Answer №2

Feel free to include:

* {  box-sizing: border-box;}

in your CSS file or specifically in the #logo ID.

You can learn more about this (in my opinion, an incredible property) here

(Just so you know... the code mentioned applies the property to all HTML elements on your website, a practice I've been using in my recent projects with no regrets)

Answer 4

Feel free to include:

* {  box-sizing: border-box;}

in your CSS file or specifically in the #logo ID.

You can learn more about this (in my opinion, an incredible property) here

(Just so you know... the code mentioned applies the property to all HTML elements on your website, a practice I've been using in my recent projects with no regrets)

Answer 5

Answer №3

Consider incorporating the following into your #logo style:

border: 2px solid transparent;

This adjustment will result in:

#logo {
width: 200px;
height: 200px;
position: relative;
top: 80px;
line-height: 12em;
border-radius: 200px;
margin: 0 10px 0 10px;
overflow: hidden;
border : 2px solid transparent;
}

An alternative option is to utilize box-sizing: border-box

Hope this suggestion proves beneficial!

Cheers!

Answer 6

Consider incorporating the following into your #logo style:

border: 2px solid transparent;

This adjustment will result in:

#logo {
width: 200px;
height: 200px;
position: relative;
top: 80px;
line-height: 12em;
border-radius: 200px;
margin: 0 10px 0 10px;
overflow: hidden;
border : 2px solid transparent;
}

An alternative option is to utilize box-sizing: border-box

Hope this suggestion proves beneficial!

Cheers!

Answer 7

Answer №4

Consider including border:1px solid transparent; for elements that are not currently being hovered over.

Answer 8

Consider including border:1px solid transparent; for elements that are not currently being hovered over.

Answer 9

Answer №5

Using box-sizing: border-box may not always result in a perfect circle when adding borders, despite its usefulness. To achieve the desired effect, consider updating your CSS as follows:

#logo:hover {
border-left: 3px solid cyan;
border-right: 3px solid cyan;
padding: 0;
margin: 0 6px 0 6px;
}

Additionally, make adjustments to your #logo class margins with the following code:

{margin: 0 9px 0 9px;}

While this solution may seem a bit unconventional, it provides the intended outcome that I personally find preferable.

Answer 10

Using box-sizing: border-box may not always result in a perfect circle when adding borders, despite its usefulness. To achieve the desired effect, consider updating your CSS as follows:

#logo:hover {
border-left: 3px solid cyan;
border-right: 3px solid cyan;
padding: 0;
margin: 0 6px 0 6px;
}

Additionally, make adjustments to your #logo class margins with the following code:

{margin: 0 9px 0 9px;}

While this solution may seem a bit unconventional, it provides the intended outcome that I personally find preferable.

Answer 11

Answer №6

To ensure the padding is included within the width of the container, make sure to include box-sizing: border-box in your CSS for the relevant element.

Check out this codepen example to see it in action: http://codepen.io/himmel/pen/LVPPvg

Answer 12

To ensure the padding is included within the width of the container, make sure to include box-sizing: border-box in your CSS for the relevant element.

Check out this codepen example to see it in action: http://codepen.io/himmel/pen/LVPPvg

Answer 13

Answer №7

Instead of relying solely on box-sizing: border-box;, you have the option to utilize the calc function to subtract a specific value.

#header:hover {
    width: calc(300px - 10px);
    height: calc(300px - 10px);
    border: 5px solid magenta;
}

This technique can be quite handy, especially when working with percentages. It's definitely a nifty workaround for scenarios like this.

Answer 14

Instead of relying solely on box-sizing: border-box;, you have the option to utilize the calc function to subtract a specific value.

#header:hover {
    width: calc(300px - 10px);
    height: calc(300px - 10px);
    border: 5px solid magenta;
}

This technique can be quite handy, especially when working with percentages. It's definitely a nifty workaround for scenarios like this.

Answer 15

Answer №8

Consider using the CSS property position: absolute; as it allows elements to be positioned independently without affecting other elements. Ensure that the parent element is assigned a position of relative. Here is an example:

` #container { position:relative;

}

#image { position:absolute; }`

Answer 16

Consider using the CSS property position: absolute; as it allows elements to be positioned independently without affecting other elements. Ensure that the parent element is assigned a position of relative. Here is an example:

` #container { position:relative;

}

#image { position:absolute; }`

Answer 17

Answer №9

If you want to keep elements stationary when hovering, add the following line of code to #logo.

#logo {
  border: 2px solid transparent;
}

Adding a transparent border to prevent elements from resizing on hover is key when applying borders to initially borderless elements.

However, be cautious with adjacent elements as adding a transparent border may create gaps between them. To avoid this, ensure that the border color matches the background color of the element.

Here is the original code snippet for reference:

#logo {
    background-color: black; /* Background */
    width: 200px;
    height: 200px;
    position: relative;
    top: 80px;
    line-height: 12em;
    border-radius: 200px;
    margin: 0 10px 0 10px;
    overflow: hidden;
}

To implement the recommended change, add the following line:

 #logo {
        border: 2px solid black;
    }

Answer 18

If you want to keep elements stationary when hovering, add the following line of code to #logo.

#logo {
  border: 2px solid transparent;
}

Adding a transparent border to prevent elements from resizing on hover is key when applying borders to initially borderless elements.

However, be cautious with adjacent elements as adding a transparent border may create gaps between them. To avoid this, ensure that the border color matches the background color of the element.

Here is the original code snippet for reference:

#logo {
    background-color: black; /* Background */
    width: 200px;
    height: 200px;
    position: relative;
    top: 80px;
    line-height: 12em;
    border-radius: 200px;
    margin: 0 10px 0 10px;
    overflow: hidden;
}

To implement the recommended change, add the following line:

 #logo {
        border: 2px solid black;
    }

When elements are hovered over, they shift due to the addition of borders. Contrary to suggestions from elsewhere, padding does not seem to have

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Answer №8

Answer №9

Similar questions

How to use Iframe for "bookmarks" without causing the main browser to jump?

Missing arrow icon in Bootstrap 4 navbar menu and sub menu

When initializing a new instance of Stripe using cartalyst/stripe-laravel, an error occurs stating "The Stripe API key has not been properly defined!"

Changing the font-family to 'Symbol' and using Windows-1252 character encoding

Prompt for user confirmation when a button is clicked using jQuery

The challenges of $location.search().name and base href in application URLs

What causes a dot to display when hovering over a link in a list?

Is there a way to only refresh the div specifically for the calendar with an id of "

Executing a function in JQuery with care

The right-aligned navigation bar elegantly shifts downward when it exceeds the screen width

Using PHP to Populate HTML Elements Depending on the Attribute of the Parent Class

Function is raising an error with the wrong value or text

Center the title vertically APEXCHARTS

Eliminate the error notification on the login page if it corresponds to the input

How can you find the index of an HTML element while excluding any clearfix divs?

steps for making a dropdown search bar

Styling elements with CSS and using it to toggle the visibility of divs based on radio

Turn off Appbar padding at the top and bottom

Learn how to toggle between two different image sources with a single click event in JavaScript

What are the steps for capturing video using openCV in a python program?