wyświetlacz: inline-blok dodatkowy margines [duplikat]

Biała spacja wpływa na elementy inline .

.container {
  font-size: 0px;
  letter-spacing: 0px;
  word-spacing: 0px;
}

.container > div {
  display: inline-block;
  margin: 0px;
  padding: 0px;
  font-size: 15px;
  letter-spacing: 1em;
  word-spacing: 2em;
}

Przykład będzie wyglądał tak.

<div class="container">
  <div>First</div>
  <div>Second</div>
</div>

Wersja jsfiddle tego. http://jsfiddle.net/QtDGJ/1/

Rok później natknąłem się na to pytanie dla inline LI problem, ale znalazłem świetne rozwiązanie, które może mieć zastosowanie tutaj.

Http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

vertical-align:bottom na wszystkich moich elementach LI Naprawiono mój problem "dodatkowego marginesu" we wszystkich przeglądarkach.

font-size: 0 do kontenera macierzystego

(Źródło: https://twitter.com/garand/status/183253526313566208)

Czystszym sposobem na usunięcie tych spacji jest użycie float: left;:

DEMO

HTML:

<div>Some Text</div>
<div>Some Text</div>

CSS:

div {
    background-color: red;
    float: left;
}

I ' TS obsługiwane w wszystkie nowe przeglądarki . Nigdy nie rozumiem, dlaczego kiedy IE rządził Lota deweloperzy nie sprawili, że ich strona działa dobrze na Firefoksie/chrome, ale dziś, gdy IE spada do 14,3% . tak czy inaczej, nie miałem wielu problemów w IE-9 nawet myślałem, że nie jest obsługiwany, na przykład powyższe demo działa dobrze.

Możesz uzyskać pionową spację, nawet jeśli nie masz żadnej spacji między elementami bloku wbudowanego.

div.container {
    line-height: 0;
}
div.container > * {
    line-height: normal;
}

Dla przypomnienia, że Resetowanie marginesu i paddingu nie zadziałało dla mnie, ale ten cytat z jednego z powyższych komentarzy okazał się kluczowy i rozwiązał problem dla mnie: "jeśli umieszczę div na tej samej linii, margines znika."

Istnieje wiele obejść tego problemu, które obejmują odstępy między wyrazami lub rozmiar czcionki, ale ten artykuł sugeruje usunięcie marginesu prawym marginesem-4PX;

Http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/

Po zmaganiu się z tym problemem zbyt wiele razy znalazłem bardzo eleganckie rozwiązanie w HTML 5. W HTML 5 nie powinieneś zamykać kilku tagów (li,p,itp.); ambicja stania się XML na zawsze minęła. Na przykład, preferowanym sposobem wykonania listy jest:

<ul>
   <li>
       <a ...>...</a>
   <li>
       <a ...>...</a>
</ul>

Przeglądarki muszą zamknąć LI i muszą to zrobić bez wprowadzania białych znaków, rozwiązując ten problem. Jeśli nadal masz nastawienie XML to czuje się źle, ale gdy już się nad tym uporasz, to oszczędza wiele koszmarów. I to nie jest hack od opiera się na sformułowaniu specyfikacji HTML 5. Lepiej, ponieważ nie zamykanie tagów jest wszechobecne, nie oczekuję żadnych problemów ze zgodnością (choć nie testowane). Zaletą jest to, że formatery HTML radzą sobie z tym dobrze.

Trochę dopracowany przykład: http://cssdesk.com/Ls7fK

Czy możesz zamieścić link do danego HTML?

Ostatecznie powinieneś być w stanie zrobić:

div {
    margin:0;
    padding: 0;
}

Aby usunąć odstępy. Czy jest to tylko w jednej konkretnej przeglądarce lub wszystkich z nich?

Innym rozwiązaniem jest użycie minifier HTML. Działa to najlepiej z procesem budowania Grunt, w którym HTML może być minifikowany w locie.

Usuwane są dodatkowe linie i spacje, co rozwiązuje problem marginesu i pozwala na zapisywanie znaczników w IDE (no </li><li>).

Napotkałem ten sam problem. To, co spowodowało to dla mnie, to kilka białych spacji ( ), które wstawiłem. Po ich usunięciu problem został rozwiązany.