J'essaie de produire une nouvelle boîte à lumière pour m'entraîner au HTML/CSS/Javascript, mais j'ai rencontré un problème de style qui semble trivial (et qui l'est probablement !) mais que je n'arrive pas à résoudre.
J'ai un div qui contient un img . Peu importe ce que j'essaie ( border , margin , padding ), je n'arrive pas à faire en sorte que les div rétrécir pour correspondre aux dimensions de l'image. J'ai réduit le problème à ceci :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>Layout experiments</title>
<style type="text/css">
#lightbox {
margin: 0;
padding: 0;
position : fixed;
left : 50%;
margin-left : -320px;
top : 100px;
border-radius: 22px;
background : #e0e0f0;
color : #102020;
}
#lightbox img {
border-radius: 15px;
}
.imagebg {
margin : 7px;
background : black;
border-radius: 15px;
height : 100%;
}
</style>
</head>
<body>
<div id="lightbox">
<div class="imagebg">
<img src="picture.jpg">
</div>
</div>
</body>
</html>L'image 'picture.jpg' est en 640x400, mais le conteneur div veut être en 640x404, la différence se manifestant par une bande noire sous l'image. La div existe pour que je puisse faire passer l'image au noir en réduisant son opacité à 0, la permuter, puis la réintégrer.
J'ai examiné les styles calculés dans plusieurs navigateurs et je ne vois pas d'où vient le delta de 4px.
