décalage de mon DIV

**nouby** · 29/05/2023, 18h50

Bonjour, J'ai un Div jaune qui est décalé de 8 px vers la droite, quelque soit le navigateur utilisé.

Ma question est ... Pourquoi le DIV jaune est décalé de 8 px ?

Ma page est une page simplement pour tester les affichages de coordonnées.

Mon code simple, on peut le tester en copiant collant ce code dans une nouvelle page html :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
 
<html lang="fr">
 
 
<head>
 
<title>Tests divers sur une page HTML.</title>
 
 
</head>
 
 
<style>
 
body{
        color:black;
        font-size:28px;
        padding:0;
}
 
.exemple{
        background-color:yellow;
        cursor:pointer;
        border:3px double;
        width:800px;
        height:600px;
        margin:0;
}
 
</style>
 
 
<body>
 
On remarque que :<br/>
 
1) La taille CSS du DIV jaune (800 x 600) est modifiée par la bordure :</br>
Il est ajouté 3 px en haut et en bas, plus 3 pix à gauche et à droite, donc 6 px de plus en largeur et 6 px de plus en hauteur.</p>
 
2) Le DIV jaune ne commence pas en x=0 comme on pourrait le penser, mais à 8 px.<br/>
Pourtant le CSS du Body est à padding:0</br>
et le CSS du DIV est à margin:0.</br>
Le décalage du Div existe même si j'enlève la bordure du Div.</p>
 
En fait c'est le navigateur Opéra qui décale le div de 8 px vers la droite.</p>
 
 
<div id="zone" class="exemple"></div>
 
 
</body>
 
 
</html>
 
<script>
 
var elem=document.getElementById("zone");
var myrect=elem.getBoundingClientRect();
elem.innerHTML="taille de cette zone :"+myrect.width+" px X "+myrect.height+" px";
elem.innerHTML+="<br/> Début X du DIV : "+myrect.x+" px";
</script>

EDIT :

Je viens de voir que le décalage du DIV jaune n'existe plus si je rajoute ça à son CSS :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
	position:absolute;
	left:0;
	top:0;

**ProgElecT** · 29/05/2023, 20h05

Salut

3 sans d'ouverture peut être.

**nouby** · 30/05/2023, 03h50

J'ai essayé de corriger les mais même résultat.

Je pense que c'est les navigateurs qui font ça non ?
En tous cas si je met absolute ça marche, comme j'ai indiqué précédemment.
C'est pas important pour le moment mais c'est surtout pour apprendre, car c'est pas normal si on peut pas placer un div à left=0.
Mais je mesure X du Div avec getBoundingClientRect() donc je me demande si le cadre du div correspond à sa position réelle.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<script>
 
var elem=document.getElementById("zone");
var myrect=elem.getBoundingClientRect();
elem.innerHTML="taille de cette zone :"+myrect.width+" px X "+myrect.height+" px";
elem.innerHTML+="<br/> Début X du DIV : "+myrect.x+" px";
</script>

**uniuc** · 31/05/2023, 09h25

Bonjour,

En fait, comme il est dit plus haut, par principe on colle une ouverture de paragraphe pour une fermeture de paragraphe.

 

Pour ton problème de 8px, c'est simplement la marge de body, si tu veux la supprimer tu rajoute dans le css sur body un :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

margin:0;

Ce qui est bien c'est de penser à faire un clic droit sur ta page dans le navigateur, et de cliquer sur inspecter, ca va te donner pas mal d'infos, sur le CSS et son comportement par le biais des onglets 'mise en page' et 'calculé'

**nouby** · 01/06/2023, 00h42

Effectivement ça venait de body margin ! ça marche

Merci, j'ai appris grace à vous !

décalage de mon DIV

CSS

Discussions similaires

Partager

Partager