Créer une grille CSS sans marge

Question

Comme le titre l'indique, j'ai besoin de créer une grille CSS sans perdre de vue l'essentiel. float car cela interférerait avec le Plugin JS Waypoints ...

Bref, je suis tombé sur display: inline-block; mais si les cases de la grille occupent 100% de la largeur du conteneur, cela ne fonctionne que si vous écrivez tout le code en une seule ligne ( JSFiddle 1 )

Comme mon projet est un modèle, je ne peux pas obliger l'utilisateur à écrire tout son code en une seule ligne.

Y a-t-il un moyen de résoudre ce problème ?

Udate 1 :

white-space: nowrap; ne m'aide pas non plus parce qu'il gâche tout le texte à l'intérieur de l'élément ( JSFiddle 2 )

Udate 2 :

Ce site font-size: 0; La solution ne m'aide pas car j'ai également besoin de texte dans l'élément parent.

Answer 1

Mise à jour :

Exemple fonctionnel sur jsFiddle .

Fixer un font-size: 0; à l'élément parent, puis en lui redonnant la taille souhaitée sur l'élément qui le contient, le problème sera résolu. Veillez également à utiliser vertical-align: top; sur les éléments qui les contiennent afin que les lignes de texte inégales commencent toutes à la même position en haut.

Remarque : si vous avez besoin que les deux divs apparaissent à une hauteur égale (en raison des couleurs d'arrière-plan, de l'image, etc.), vous devrez utiliser l'attribut technique des fausses colonnes .

.left {
    background: red;
    height: 140px;
    width: 55%;
    margin: 0 5% 0 0;
    display: inline-block;
    font-size: 14px;
    vertical-align: top;
}
.right {
    background: orange;
    height: 140px;
    width: 40%;
    display: inline-block;
    font-size: 14px;
    vertical-align: top;
}
section {
    background: black;
    width: 100%;
    margin: 0 0 20px;
    color: #ffffff;
    font-size: 0;
}

Correction si les divs ne contiennent pas de texte :

Exemple de travail sur jsFiddle .

Ajouter white-space: nowrap; à la règle de la section :

section {
    background: black;
    width: 100%;
    margin: 0 0 20px;
    white-space: nowrap;
}

Pour plus d'informations sur le white-space la propriété, voir : http://www.quirksmode.org/css/whitespace.html

Answer 2

CSS Tricks propose un excellent article sur la suppression des espaces blancs supplémentaires lors de l'utilisation de l'option inline-block

http://css-tricks.com/fighting-the-space-between-inline-block-elements/