Onduidelijke marges rondom kolommen

[PdeBie]

Hoi allemaal,

ik heb een probleem met wat marges rondom mijn kolommen die ik niet weg krijg.



Rondom de blokken zijn duidelijke marges te zien. Waar ze echter vandaan komen?? Ik heb geen idee. De webdeveloper toolbar geeft ook aan dat de marges 0 zijn. Toch zie je ze wel.

HTML:

<div class="container">
    <div class="row">
        <div class="column wide">
            <img src="http://placehold.it/540x397">
        </div>
        <div class="column">
            <h2>Title</h2>
            In hac habitasse platea dictumst. Suspendisse ultricies, ipsum non pellentesque molestie, lectus nulla vehicula nulla, nec varius ipsum magna nec leo. Etiam dictum sapien tellus, ac suscipit nibh euismod sit amet. Curabitur tempor orci quis diam pulvinar. 
        </div>
    </div>
        
    <div class="row">
        <div class="column">
            <img src="http://placehold.it/270x202">
        </div>
        <div class="column">
            <img src="http://placehold.it/270x202">
        </div>
        <div class="column">
            <img src="http://placehold.it/270x202">
        </div>
    </div>
</div>

Cascading Stylesheet:

/* Container */

.container {
    background-color: #F2F2F2;
    margin: 0 auto; /* centreer container t.o.v. pagina */
    width: 820px;
}

/* Columns */

.column {
    display: inline-block;
    width: 270px;
    margin: 0;
}

.wide {
    width: 540px;
}

Iemand een idee waar die witruimte rondom de blokken vandaan komt?

[FotW]

Yep dat is spacing veroorzaakt door inline-block: https://css-tricks.com/fi...en-inline-block-elements/

[PdeBie]

Ah inderdaad. Spaties verwijderd en nu wordt het correct weergegeven inderdaad.

Toch maar eens kijken of ik float ga gebruiken (vind ik eerlijk gezegd nog wel altijd wat lastig werken) of dat ik eens naar dat Flexbox ga kijken (totaal geen ervaring mee nog).

-- edit --

Geldt dat overigens ook voor de horizontale marge tussen de twee rijen? Die wil ik ook weg hebben namelijk.

[ Voor 18% gewijzigd door PdeBie op 24-07-2015 15:01 . Reden: vraag toegevoegd ]

[IschaGast]

Images hebben standaard ook een soort van spacing, als je daar display:block voor gebruikt dan komt het weer goed. Zou zelf gewoon float gebruiken en je container dan een clearfix geven.

https://css-tricks.com/snippets/css/clear-fix/

En wat uitleg over floats kan ook nooit kwaad:
https://css-tricks.com/all-about-floats/

css-tricks is een goede site voor al je dingen die je niet weet. Staat heel veel goede content op en komt ook vaak als eerste naar voren via google.

[ Voor 34% gewijzigd door IschaGast op 24-07-2015 22:43 ]

[Krilo_89]

PdeBie schreef op vrijdag 24 juli 2015 @ 11:29:

Geldt dat overigens ook voor de horizontale marge tussen de twee rijen? Die wil ik ook weg hebben namelijk.

Dat heeft te maken met dat je images geen display: block; hebben denk ik.
Waarschijnlijk is de lege ruimte daarna weg.

- edit -

Ik heb het bericht van de persoon boven me verkeerd gelezen

[ Voor 11% gewijzigd door Krilo_89 op 27-07-2015 09:01 ]

[PdeBie]

IschaGast schreef op vrijdag 24 juli 2015 @ 22:42:
Images hebben standaard ook een soort van spacing, als je daar display:block voor gebruikt dan komt het weer goed. Zou zelf gewoon float gebruiken en je container dan een clearfix geven.

Maar als je de afbeeldingen display:block geeft, zet hij ze dan niet automatisch op de volgende regel ipv naast elkaar?

Of heft de float:left dat weer op?

-- edit --
inmiddels afbeeldingen op display:block gezet en marges zijn inderdaad weg. Waarom dit zo is? Geen idee. Dus als iemand me dit kan uitleggen, graag

[ Voor 15% gewijzigd door PdeBie op 27-07-2015 16:03 ]

[Nedra]

http://stackoverflow.com/...age-have-space-underneath

[incaz]

Images zijn standaard inline, en hebben dus te maken met zaken als lineheight enzo. In dit geval denk ik dat eea ook nog samenhangt met de verticale positioning: je ziet dat de horizontale ruimte onder de image precies zo groot is als de pootjes van de p's en q's in de tekst.

Even zonder te controleren, maar voor zover ik weet is de standaard positioning 'baseline', en je kunt dus dingen hebben die naar beneden onder de baseline uitsteken.

Maar ik zou vooral proberen met flex, want het viel mij eigenlijk best wel mee. De verdeling 2/3 1/3 of 1/3 1/3 1/3 is heel goed te doen.

Een alternatief is display: table. Let op, je moet dan display: table zetten op je row, en dan display: cell op je kolommen, want css-tables kennen geen column-span en dus kun je anders niet een cell creeren die 2 keer zo breed is. Als je alle formaten hardcoded hebt is dat geen probleem (en ook percentages moeten in principe geen probleem geven, zolang je ze maar goed berekent en de content de table niet kan oprekken. Eventueel een [mono]table-layout: fixed[//] naar wijsheid gebruiken.)

[PdeBie]

Inmiddels heb ik alle marges weg weten te werken. Ook op mobiel etc. wordt het nu naar wens weergegeven, zowel in landscape als portrait.

Vooral de tip van IschaGast in een ander topic om mobile-first te ontwikkelen heeft het geheel een stuk makkelijker gemaakt zeg!

Heb op het laatst de gemaakte CSS even in een apart tekst document gezet en vervolgens nog eens in zijn geheel doorlopen om te kijken waar overlappingen zitten (twee keer ergens een width bepaald bijvoorbeeld) en die eruit gehaald, zodat ik een zo schoon mogelijke CSS over hou. Ook nog wat commentaar toegevoegd bij bepaalde zaken waarom ik die instelling gedaan heb.
Stuk leesbaarder nu.

Dank u allen voor de tips!

[crisp]

Ik mis de vertical-align:bottom 'truuk' eigenlijk hier

inline en inline-block elementen lijnen standaard uit op de baseline van een regel (waar dus inderdaad de pootjes van bepaalde letters onderuit steken). Als je wilt dat elementen helemaal tot onderin worden uitgelijnt dan kan je dat met vertical-align bewerkstelligen

[Grijze Vos]

Ik zou iig niet alle whitespace weghalen uit je broncode en het daarbij laten.Je kunt zomaar ooit met een kleine wijziging in je template waar whitespace of newlines worden toegevoegd, of iets van cms content die dan ineens je layout verneukt.


Je kunt dit oplossen met negatieve word- (-.22em) en letter spacing (-.35em) (die laatste is nodig voor webkit, zo uit mijn hoofd.) Die waardes doe ik zo uit mijn hoofd, zou je even moeten controleren.

Een andere oplossing is font-size: 0 op je container en font-size restoren op je column. Sommige browsers kunnen font-size: 0 niet aan, daar kun je evt nog omheen werken met font-size: 1px, en een margin van -1px.

Die laatste oplossing gebruik ik bij mijn eigen grid systeem, werkt prima.

[ Voor 22% gewijzigd door Grijze Vos op 30-07-2015 16:38 ]

[R4gnax]

Belangrijke kanttekening bij wat Grijze Vos schreef:

Het idee met font-size:0 werkt in met name oudere Webkit browsers, maar in aziatische localisaties ook in moderne Webkit browsers niet goed. Deze dwingen namelijk een minimum font grootte af die varieert van 3 tot 10 punts.

Nog irritanter is dat er een aantal zijn waar deze minimum grootte ook niet gereflecteerd wordt in de gerapporteerde em-grootte, waardoor compenseren met negatieve letter-spacing of word-spacing op basis van een em-groote niet juist werkt. Omdat de daadwerkelijke minimum grootte fluctueert, werkt een negatieve letter-spacing of word-spacing op basis van absolute pixels ook niet.


Om deze problemen valt heen te werken door een speciaal webfont te bouwen waarin alle codepoints voor spatie karakters wijzen naar een glyph met een 0 punts advance width.

Naast het feit dat je de font-size op 0 stelt op je grid container en herstelt op je grid columns, stel je dan ook de font-family op de grid container op dat speciale blanco webfont in en herstel je de font-family op de grid container.

Doorgaans is zo'n blanco font trouwens zo klein dat je het makkelijk met base64 kunt inlinen. Gebruik alleen wel SVG of TTF, want oudere webkit browsers die hier ook in niet-aziatische localisaties last van hebben, ondersteunen in de regel WOFF nog niet.

[ Voor 10% gewijzigd door R4gnax op 30-07-2015 21:28 ]

[n8n]

Gewoon de li niet sluiten, dit is valide en zorgt er voor dat er geen whitespace ontstaat bij inline-block

[CH4OS]

n8n schreef op zondag 02 augustus 2015 @ 23:59:
Gewoon de li niet sluiten, dit is valide en zorgt er voor dat er geen whitespace ontstaat bij inline-block

Had ik zelf niet verwacht trouwens, maar inderdaad:

An li element’s end tag may be omitted if the li element is immediately followed by another li element or if there is no more content in the parent element.

Al mogen ze wel wat doen aan de grammatica. An li? Moet natuurlijk a li zijn immers.

[ Voor 30% gewijzigd door CH4OS op 03-08-2015 00:29 ]

[PdeBie]

Grijze Vos schreef op donderdag 30 juli 2015 @ 16:35:
Ik zou iig niet alle whitespace weghalen uit je broncode en het daarbij laten.

Nee, dit heb ik niet gedaan. Wordt de broncode ook flink onleesbaar door vind ik. Niet dat dat op een productie omgeving boeit (na minimizen), maar met de huidige oplossing is het ook gelukt

[Verwijderd]

[b]CptChaos schreef op maandag 03 augustus 2015 @ 00:28:Al mogen ze wel wat doen aan de grammatica. An li? Moet natuurlijk a li zijn immers.

Ik denk dat ze het in uitspraak als afkorting gebruiken (wat het feitelijk ook is natuurlijk, list item) en als je zegt "el ai" klopt de "an" wel.

[ Voor 0% gewijzigd door Verwijderd op 03-08-2015 09:14 . Reden: Typo ]