Граница вокруг коробки не совсем центральная [дубликат] ⇐ CSS

[Anonymous]

Я пытаюсь добиться этого.


Но согласно этому JSFiddle https://jsfiddle.net/52pv9srk/, коробка находится не совсем посередине, что бы я ни делал, она всегда выглядит немного не так! Кроме того, я изо всех сил стараюсь, чтобы они не перемещались при наведении курсора.

Код: Выделить всё

.attribute-block {
margin-bottom: 30px;
}

.attribute-block a {
text-decoration: none;
}
.attribute-colour {
width: 40px;
height: 40px;
display: inline-block;
text-decoration: none;
}
.attribute-colour:hover, .attribute-colour-selected {
position: absolute;
top: 3px;
left: 3px;
width: 32px;
height: 33px;
}
.attribute-colour-hover-border {
position: relative;
display: inline-block;
border: 0;
width: 40px;
height: 40px;
}
.attribute-colour-hover-border:hover, .attribute-colour-hover-border-selected {
position: relative;
border: 1px solid black;
width: 40px;
height: 40px;
display: inline-block;
}

Код: Выделить всё

Colour [b]Black[/b]

Подробнее здесь: https://stackoverflow.com/questions/792 ... te-central