Technique de la boîte CSS autour de la boîte

J'essayais de créer une boîte de division CSS contenant du contenu et une bordure autour de celle-ci. Au lieu d'utiliser la technique de la bordure de boîte, j'essayais plutôt une nouvelle technique box-to-box.Technique de la boîte CSS autour de la boîte

<html> 
<head> 
    <style type="text/css"> 
    #outer{ 
    height: 20px; 
    width: 20px; 
background-color:#233D78; 


    } 
    #inner{ 

height:18px; 
width: 18px; 
    background-color: #FFF; 

    font-size: 1em; 
    text-align:center; 
    font-family:'Bookman Old Style', serif; 
    padding: 0px; 
    margin-top: 1px; 
    margin-right:auto; 
    margin-left:auto; 
    margin-bottom:1px; 
    vertical-align:middle; 

     } 
    </style> 
</head> 
<body> 
<div id="outer"><div id="inner">TEXT</div></div> 
</body> 
</html>

D'une certaine manière, les bordures ne s'affichent pas correctement avec FireFox.

J'ai tout essayé. Mise en place des Paddings des deux boîtes, marge, et déconner avec la largeur.

pour être honnête, il m'a emmené 30min de le faire et je ne peux toujours pas faire les choses :(

Je sais qu'une façon d'obtenir le même résultat consisterait à créer une bordure autour d'un seul boîte. Mais je veux juste apprendre cette boîte autour technique de couleur de fond de la boîte.

Mercis à l'avance

Source

2010-04-29 Dennis D

Ce qui semble fonctionner le plus régulièrement consiste à utiliser un remplissage plutôt qu'une marge.

#outer { 
    width:18px; 
    height:18px; 
    padding:1px; 
    background-color:#233D78; 
} 
#inner { 
    width:18px; 
    height:18px; 
    background-color:#fff; 
}

Source

2010-04-29 18:50:26 Joel

Merci monsieur. Cela résout le problème à la fois dans IE et FF. Donc, vous suggérez que la marge n'est pas bonne dans une technique comme celle-ci? Ou est-ce simplement inconsistant. Logiquement parlant, la marge devrait fonctionner. Surtout en FF quel surprenant est le navigateur qui cause des problèmes. –

@webzide. Je ne sais pas pourquoi la marge supérieure n'est pas appliquée dans FF (elle a le même problème dans webkit). Fait intéressant, si vous appliquez 'overflow: auto;' à la div externe, les fonctions de marge comme prévu (exemple: http://jsbin.com/ivofa4/edit). Je préférerais utiliser un padding de toute façon puisque je ne veux pas toujours 'overflow: auto'. – Joel

Application border: 2px solid #fff; sur #outer résout le problème très bien. Ensuite, vous pouvez simplement se débarrasser de #inner, car il est redondant.

MAIS si vous insistez sur l'utilisation de deux DIV, ce que vous voulez faire est de supprimer les instructions height & width et d'appliquer margin: 2px; à #inner. Cela permettra à 2 pixels de #outerbackground-color d'être visibles.

Source

2010-04-29 18:48:07

Vous devez savoir comment la disposition fonctionne! L'utilisation de marge sur l'intérieur fonctionnerait ou le remplissage sur l'extérieur fonctionnerait. Souvenez-vous que lorsque vous appliquez des marges, des bordures ou des remplissages à l'élément, ils sont disposés dans cet ordre. (La marge entoure la bordure, qui enveloppe le remplissage, qui enveloppe l'élément.)

Ci-dessous utilise la marge intérieure créer une boîte autour d'une bordure de boîte.

<html> 
<head> 
    <style type="text/css"> 
    #outer{ 
    height: 20px; 
    width: 20px; 
background-color:#233D78; 


    } 
    #inner{ 


    background-color: #FFF; 

    margin: 2px; 
     } 
    </style> 
</head> 
<body> 
<div id="outer"><div id="inner">TEXT</div></div> 
</body> 
</html>

Source

2010-04-29 18:54:06

Cela fonctionne bien dans IE bien, mais pas dans firefox Dans firefox, les 2 "frontières" du haut n'apparaissent pas –

étrange Firefox aime seulement la technique de remplissage. –

Merci pour votre aide monsieur –

Technique de la boîte CSS autour de la boîte

Répondre

Questions connexes