28172 sujets

CSS et mise en forme, CSS3

Taille d'un div

Bonjour,
Quelqu'un peut il m'expliquer pourquoi je doit mettre la largeur de la classe BouttonsSuivantPrecedent à 204 pour que les 2 spans d'une largeur de 100 soient sur la même ligne.
Je pensais qu'une largeur de 100 suffirai...

Merci d'avance
Stéphane


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Untitled Document</title>
   <style>
   	.BouttonsSuivantPrecedent
	{
		margin:auto;
		padding:0;
		border:0;
		width:200px;
		background-color:#F9F;
	}

	.BouttonSuivant
	{
		display:inline-block;
		margin:0;
		padding:0;
		border:0;
		width:100px;
		background-color:#3F0;
	}
	
	.BouttonPrecedent
	{
		display:inline-block;
		margin:0;
		padding:0;
		border:0;
		width:100px;
		background-color:#09F;
	}
   </style>
  </head>

  <body>
      <div class="BouttonsSuivantPrecedent">
          <span class="BouttonPrecedent">
          	tutu
          </span>
          <span class="BouttonSuivant">
          	tata
          </span>
      </div>
  </body>
</html>
Salut,

Parce que tu utilises inline-block, qui génères un whitespace de quelques pixels entre les éléments concerné (cet espace est variable selon la taille de la police).

Pour éviter ce problème il y plusieurs solutions, notamment écrire tout sur une ligne (pas très lisible pour celui qui lis le code), ou mettre des commentaires entre tes span comme ceci :
<span>contenu</span><!--
--><span>contenu</span>


Enfin le mieux c'est encore de lire cette article.
Modifié par Gili (23 Feb 2012 - 19:27)
Sujet clos
Aller à