web-dev-qa-db-fra.com

HTML CSS Box avec un rembourrage, une marge et une largeur de 100%?

J'ai une boîte #box avec largeur: 100%, hauteur: 100%, remplissage: 5px, marge: 5px; bordure: 5px;

J'ai besoin dans la mise en page HTML5 d'afficher correctement cela.

Maintenant j'ai ça:

enter image description here

Mais j'ai besoin d'un bloc en forme dans la zone du corps.

Code:

<!DOCTYPE html>
    <style>
    body,html {
        width: 100%;
        height: 100%;
        margin: 0;
    }

    #box {
        width: 100%;
        height: 100%;
        border: 5px solid red;
        padding: 15px;
        margin: 20px;
    }
    </style>

    <body>
    <div id="box">
    Text will be here
    </div>
    </body>
htmlcssbordermarginpadding
11
xercool

Le navigateur fait exactement ce que vous lui dites de faire:) Cependant, je pense que vous n’aimez pas le débordement qu’il a.

En réalité, votre #box se développe à cause de votre bordure et de votre remplissage. Vous pouvez insérer ces propriétés dans l'encadré afin que votre élément ne soit pas développé. Vous pouvez le faire avec box-sizing:

 #box {
     width: 100%;
     height: 100%;
     border: 5px solid red;
     padding: 15px;
     /*margin: 20px;*/
     box-sizing: border-box;
 }

Cependant, vous ne pouvez pas faire la même chose avec la variable margin, car l'élément se pousse du corps: il fait ce qu'il suppose.

Vous pouvez créer une solution de contournement en procédant comme ci-dessus:

body
{
    padding: 20px;
    box-sizing: border-box;
}

_ {Vous utiliserez le remplissage sur le corps au lieu de la marge sur le #box.

jsFiddle

Mise à jour

Pour éviter l’espace de double remplissage, vous ne devriez l’appliquer qu’à l’élément body (ou html, mais je préfère le body car c’est votre élément visuel à la fin).

31
nkmol

Selon Spécifications w3c pour modèle de boîte

La largeur de rendu d'un élément de type boîte est égale à la somme de sa largeur, de ses bordures gauche/droite et de son remplissage gauche/droite.

Cela signifie donc que les valeurs de padding et border-width affectent la largeur totale de l'élément. Vous ajoutez donc ici le 15px du padding avec le 5px des bordures avec 100% de la largeur réelle de l'élément. 

Donc, dans l’ensemble, la taille de la veuve dépasse la taille de la veuve, c’est pourquoi elle vient avec un défilement horizontal. 

3
Sachin

Vous devriez utiliser la propriété CSS box-sizing:

#box {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    margin: 0;
}

Mais notez que vous devrez utiliser zéro margin pour que cela fonctionne.

Il existe un bon article explicatif sur la façon dont cela fonctionne: http://css-tricks.com/box-sizing/

Avec CSS3, vous pouvez remplacer la bordure par l'insertion border-shadow et la marge par la bordure transparente. De cette façon, vous aurez le contrôle de tous ces paramètres: padding, margin (faux) et border:

#box {
    width: 100%;
    height: 100%;
    padding: 15px;
    border:20px solid transparent;
    box-sizing:border-box;
    -webkit-box-shadow: inset 0px 0px 0px 5px #f00;
    box-shadow: inset 0px 0px 0px 5px #f00; 
    -moz-box-sizing:border-box;
}

Voir un violon en direct ici: http://jsfiddle.net/HXR3r/

2
keaukraine

Vous pouvez utiliser css calc ()

#box {
        border: 5px solid red;
        padding: 15px;
        margin: 20px;
        width: calc(100% - 80px);
        height: calc(100% - 80px);
    }
1
Saragoça

violon

Votre problème est, que vous avez remarqué, en supposant que pour heights

height:100%;
border: 5px solid red;
padding: 15px;
margin: 20px;

Cela fait une hauteur = 100% + bordure (2 x 5) + remplissage (2 x 15) + marge (2 x 20) = 100% + (10 + 30 + 40) px

qui est plus que 100%... donc pas fit block in body area.. Essayez de réduire avec la hauteur en pourcentage pour un meilleur résultat !! 

Similaire est le cas pour les largeurs !!

0
NoobEditor

Vous devez ajouter la propriété Add box-sizing: border-box; dans votre #box et supprimer margin: 20px;.

Voici le CSS mis à jour:

body, html {
    width: 100%;
    height: 100%;
    margin: 0;
}
#box {
    width: 100%;
    height: 100%;
    border: 5px solid red;
    padding: 15px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

violon de travail

0
UID