0

While implementing a Wordpress plugin-like feature, I've found out that two DOMs with same styles applied (according to Chrome Developer tools) under very similar structure - "very similar" here means that the difference doesn't really count in styling - are rendered differently.

Desired:

Desired

Bad:

Bad

It's quite hard to provide a fiddle because they're on Wordpress with lots of custom styles. You can compare these two DOMs on a live website. (Sorry it's in Korean but there's no nationality in HTML DOMs right?)

For now in the "bad" page, I added inline jQuery code to update DOM structure on document ready in order to make its structure to a desired state as same as possible.

Lee Han Kyeol
  • 2,371
  • 2
  • 29
  • 44
  • do you know what margin does? – madalinivascu Jul 04 '16 at 06:36
  • 1
    You can see there are new line character between li element on the first link, but not on the second link. – user2970115 Jul 04 '16 at 06:39
  • @user2970115 You're right. I've just added new line(`\n`)s and it looks the same. If you want your answer to be selected, please add you answer on the question. Thank you very much! – Lee Han Kyeol Jul 04 '16 at 06:44
  • 1
    Haha, I've not provide a complete ans. BTW, you can know more about it on this [question](http://stackoverflow.com/questions/19038799/why-is-there-an-unexplainable-gap-between-these-inline-block-div-elements). pleased to help you :) – user2970115 Jul 04 '16 at 07:03

1 Answers1

0

Try the following:

.archive-pagination.pagination ul li {
    margin: 2px;//alter to your likeing
}
madalinivascu
  • 32,064
  • 4
  • 39
  • 55
  • I think I'd better clarify what I'm asking here. I surely can make the "bad" one look the same as the "desired" one and I'm now asking how. What I'm wondering is that they have same styles (per Chrome) but is displayed differently as you see there. – Lee Han Kyeol Jul 04 '16 at 06:38