CODEWITHSUNDEEP
htmltwitter-bootstrap
mousa.Alshaikh
mousa.Alshaikh

Reputation: 23

Remove whitespaces between div element

I have HTML page that contain multiple div element each div is card that display as inline-block the number of generated div depends on row data comes from server, until here every things going as i need but theres whitespace between each card div that make an inappropriate display on phone and i think the problem from whitespace i'll attach screenshot for inspector?enter image description here

Upvotes: 0

Views: 41

Answers (2)

Rob
Rob

Reputation: 15168

Inline elements are treated as text. (I'm making this overly simplified.) Notice that text has spaces between words. Images have spacing between them for the same reason. Therefore, inline elements will have spaces between elements.

The way around this is to trick the browser into thinking elements are letters 

<div>content</div><div>content</div>

Now there is no spacing or elements between content.

There are other ways to do the same thing, such as:

<div>content</div
><div>content</div>

Upvotes: 1

thisiskelvin
thisiskelvin

Reputation: 4202

display:inline-block seems to leave very small spaces between elements.

Either use flexbox (display:flex on parent element) or a little trick of adding margin-left:-1px to each element (or however much space is being created between each element).

Upvotes: 1

Related Questions