Clearfix for iPhone

Question

How do you make a clearfix that clears the space between inline-block divs inside a wrapper?

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
<div>

Applying font-size: 0; on the parent element works on desktop browser, but not with iOS Safari.

Using comments between each child works really well, but it's not looking good in the DOM.

So I figured a clearfix would make itself some use here, but I can't get it to work, because ::after is not applying after the children, it's stuck inside the div.

.child:after {
    content: "";
    display: table;
    clear: both;
}

Is there any way of removing the unwanted margins between inline-blocks that works on both iPhones Safari and Desktop browsers?

_“So I figured a clearfix would make itself some use here”_ – no, of course it doesn’t – because you are not dealing with floated elements here. And neither are those spaces _margins_. // https://css-tricks.com/fighting-the-space-between-inline-block-elements/ — CBroe, Feb 23 '16 at 09:42

score 0 · Accepted Answer · answered Feb 23 '16 at 09:30

I am trying to recreate the "unwanted margins" you're talking about.

While looking at this fiddle in my phone and desktop I can't see anything unusual.

HTML

<div class="parent">
   <div class="child"></div>
   <div class="child"></div>
<div>

CSS

.parent:after{
    content: "";
    display: block;
    clear: both;
}
.child{
  display: inline-block;
  float: left;
  background:coral;
  width: 50%;
  height: 100px;
}
.child+.child{
  background: aquamarine;
}

Fiddle: https://jsfiddle.net/Sprazer/dLhmyqrL/

If you can't reproduce the problem, don't post an answer. – cimmanon Feb 23 '16 at 12:04 — cimmanon, Feb 23 '16 at 12:04

RWAM · Answer 2 · 2016-02-23T09:50:00.203

-1

Is there any way of removing the unwanted margins between inline-blocks that works on both iPhones Safari and Desktop browsers?

I use the following to remove unwanted margins:

.child {
  display: inline-block;
  margin-right: -.25em;
}

You don't need a float or a clearfix. More info at https://css-tricks.com/fighting-the-space-between-inline-block-elements/

edited Feb 23 '16 at 09:50

answered Feb 23 '16 at 09:43

RWAM

5,949
3
32
41

Clearfix for iPhone

2 Answers2