Jak usunąć odstęp między elementami bloku wbudowanego?

Dla przeglądarek zgodnych z CSS3 istnieje white-space-collapsing:discard

Zobacz: http://www.w3.org/TR/2010/WD-css3-text-20101005/#white-space-collapsing

Ok, chociaż podniosłem zarówno font-size: 0;, jak i not implemented CSS3 feature odpowiedzi, po wypróbowaniu okazało się, że żadne z nich nie jest realnym rozwiązaniem .

Właściwie, nie ma nawet jednego obejścia bez silnych skutków ubocznych.

Następnie postanowiłem usunąć spacje (ta odpowiedź dotyczy tego argumentu) pomiędzy inline-block divami z mojego HTML source (JSP), turning this:

<div class="inlineBlock">
    I'm an inline-block div
</div>
<div class="inlineBlock">
    I'm an inline-block div
</div>

Do tego

<div class="inlineBlock">
    I'm an inline-block div
</div><div class="inlineBlock">
    I'm an inline-block div
</div>

Ale czekaj chwileczkę... co jeśli generuję moje div wewnątrz Taglibs loops (Struts2, JSTL, itd...) ?

Na przykład:

<s:iterator begin="0" end="6" status="ctrDay">
    <br/>
    <s:iterator begin="0" end="23" status="ctrHour">
        <s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}">
            <div class="inlineBlock>
                I'm an inline-block div in a matrix 
                (Do something here with the pushed object...)
           </div>
       </s:push>
    </s:iterator>
</s:iterator>

<s:iterator begin="0" end="6" status="ctrDay">
    <br/>
    <s:iterator begin="0" end="23" status="ctrHour"><s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}"><div class="inlineBlock>
                I'm an inline-block div in a matrix             
                (Do something here with the pushed object...)
           </div></s:push></s:iterator>
</s:iterator>

To nie jest czytelne, trudne do opanowania i zrozumienia itp...

Rozwiązanie, które znalazłem:

Użyj komentarzy HTML, aby połączyć koniec jednego div z początkiem następnego!

<s:iterator begin="0" end="6" status="ctrDay">
   <br/>
   <s:iterator begin="0" end="23" status="ctrHour"><!--
    --><s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}"><!--
        --><div class="inlineBlock>
                I'm an inline-block div in a matrix             
                (Do something here with the pushed object...)
           </div><!--
    --></s:push><!--
--></s:iterator>
</s:iterator>

W ten sposób będziesz miał czytelny i poprawnie wcięty kod.

I, jako pozytywny efekt uboczny, HTML source, choć porażone pustymi komentarzami, wynik będzie poprawnie wcięty;

Weźmy pierwszy przykład, imho to:

    <div class="inlineBlock">
        I'm an inline-block div
    </div><!--
 --><div class="inlineBlock">
        I'm an inline-block div
    </div>

Is better than this

    <div class="inlineBlock">
         I'm an inline-block div
    </div><div class="inlineBlock">
         I'm an inline-block div
    </div>

Dodaj Komentarze pomiędzy elementami, aby nie miały białej spacji. Dla mnie jest to łatwiejsze niż zresetowanie rozmiaru czcionki do zera, a następnie ustawienie go z powrotem.

<div>
    Element 1
</div><!--
--><div>
    Element 2
</div>

To jest ta sama odpowiedź, którą udzieliłem na pokrewnym: Display: inline block-Co to za spacja?

Istnieje naprawdę prosty sposób na usunięcie białych spacji z bloku wbudowanego, który jest zarówno prosty, jak i semantyczny. Nazywa się to czcionką niestandardową ze spacjami o zerowej szerokości, która pozwala zwinąć białe znaki (dodawane przez przeglądarkę dla elementów wbudowanych, gdy znajdują się w oddzielnych wierszach) na poziomie czcionki za pomocą bardzo małej czcionki. Po zadeklarowaniu czcionki wystarczy zmienić font-family na pojemnik i z powrotem na dzieci, i voila. Tak:

@font-face{ 
    font-family: 'NoSpace';
    src: url('../Fonts/zerowidthspaces.eot');
    src: url('../Fonts/zerowidthspaces.eot?#iefix') format('embedded-opentype'),
         url('../Fonts/zerowidthspaces.woff') format('woff'),
         url('../Fonts/zerowidthspaces.ttf') format('truetype'),
         url('../Fonts/zerowidthspaces.svg#NoSpace') format('svg');
}

body {
    font-face: 'OpenSans', sans-serif;
}

.inline-container {
    font-face: 'NoSpace';
}

.inline-container > * {
    display: inline-block;
    font-face: 'OpenSans', sans-serif;
}

Wszystkie techniki eliminacji przestrzeni dla {[0] } to paskudne hacki...

Użyj Flexbox

To niesamowite, rozwiązuje cały ten układ inline-block BS, a od 2017 ma 98% wsparcie przeglądarki (więcej, jeśli nie dbasz o stare IEs).

• Czy jesteśmy gotowi do korzystania z Flexbox?
• korzystanie z CSS flexible boxes-Web developer guide | MDN
• kompletny przewodnik po Flexbox / CSS-Tricks
• Flexy Boxes-CSS flexbox i narzędzie do generowania kodu

Dodaj display: flex; do elementu nadrzędnego. Oto rozwiązanie z przedrostkiem:

p {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
span {
  float: left;
  display: inline-block;
  width: 100px;
  background: blue;
  font-size: 30px;
  color: white;
  text-align: center;
}

<p>
  <span> Foo </span>
  <span> Bar </span>
</p>

Update

Wersja uproszczona

p {
  display: flex;
}

span {
  width: 100px;
  background: tomato;
  font-size: 30px;
  color: white;
  text-align: center;
}

<p>
  <span> Foo </span>
  <span> Bar </span>
</p>

Jeszcze dwie opcje oparte na moduł tekstowy CSS Poziom 3 (zamiast white-space-collapsing:discard które zostały wycofane z projektu spec):

• word-spacing: -100%;

Teoretycznie powinno robić dokładnie to, co jest potrzebne - skracać białe spacje pomiędzy wyrazami o 100% szerokości znaku spacji, czyli do zero. Ale wydaje się, że nigdzie nie działa, niestety, i to cecha jest oznaczona jako "zagrożona" (można ją usunąć ze specyfikacji, też).

• word-spacing: -1ch;

Skraca przestrzenie między wyrazami o szerokość cyfry "0". W czcionce maszynowej powinna ona być dokładnie równa szerokości znaku spacji (jak i każdego innego znaku). Działa to w przeglądarce Firefox 10+, Chrome 27+ i prawie działa w przeglądarce Internet Explorer 9+.

Fiddle

Niestety, jest rok 2015 i white-space-collapse nadal nie jest zaimplementowany.

W międzyczasie, daj element nadrzędny font-size: 0; i ustaw font-size na dzieci. To powinno załatwić sprawę

Użyj flexbox i wykonaj fallback (z sugestii powyżej) dla starszych przeglądarek:

ul {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

Font-size: 0; może być nieco trudniejsze do zarządzania...

Myślę, że następujące kilka linii jest o wiele lepsze i bardziej wielokrotnego użytku, i oszczędność czasu niż jakiekolwiek inne metody. Ja osobiście używam tego:

.inline-block-wrapper>.inline-block-wrapper,
.inline-block-wrapper{letter-spacing: -4px;}
.inline-block-wrapper>*{letter-spacing: 0;display: inline-block;}

/* OR better shorter name...*/
.items>.items,
.items{letter-spacing: -4px;}
.items>*{letter-spacing: 0;display: inline-block;}

Następnie można go użyć w następujący sposób...

<ul class="items">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
</ul>

O ile wiem (może się mylę), ale wszystkie przeglądarki obsługują tę metodę.

Wyjaśnienie :

To działa (może-3px może być lepsze) dokładnie tak, jak byś się spodziewał, że zadziała.

• ty skopiuj i wklej kod (raz)
• następnie w Twoim html po prostu użyj class="items" na rodzicu każdego bloku inline.

Nie będziesz musiał wracać do css i dodawać kolejnej reguły css dla nowych bloków wbudowanych.

Zwróć również uwagę na > (większy niż znak) oznacza to, że * / wszystkie dzieci powinny być w bloku liniowym.

Http://jsfiddle.net/fD5u3/

Uwaga: zmodyfikowałem, aby dziedziczyć odstępy między literami, gdy owijka ma owijkę potomną.

Proste:

item {
  display: inline-block;
  margin-right: -0.25em;
}

Nie ma potrzeby dotykania elementu nadrzędnego.

Jedyny warunek: rozmiar czcionki elementu nie może być zdefiniowany (musi być równy rozmiarowi czcionki rodzica).

0.25em jest wartością domyślną word-spacing

W3Schools-właściwość odstępów wyrazów

Chociaż technicznie nie jest to odpowiedź na pytanie: "Jak usunąć odstęp między elementami liniowymi?"

Możesz wypróbować rozwiązanie flexbox i zastosować poniższy kod, a spacja zostanie usunięta.

p {
   display: flex;
   flex-direction: row;
}

Możesz dowiedzieć się więcej na ten temat pod tym linkiem: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Właśnie miałem ten problem i od font-size:0; znalazłem, że w Internet Explorerze 7 problem pozostaje, ponieważ Internet Explorer myśli "rozmiar czcionki 0?!?! WTF zwariowałeś?"- Tak, w moim przypadku mam Eric Meyer CSS reset i z font-size:0.01em; mam różnicę 1 piksel z Internet Explorer 7 do Firefox 9, więc, myślę, że to może być rozwiązanie.

Zazwyczaj używamy takich elementów w różnych liniach, ale w przypadku display:inline-block używanie znaczników w tej samej linii usunie spację, ale w innej linii nie.

Przykład z tagami w innej linii:

p span {
  display: inline-block;
  background: red;
}

<p>
  <span> Foo </span>
  <span> Bar </span>
</p>

Przykład z tagami w tej samej linii

p span {
  display: inline-block;
  background: red;
}

<p>
  <span> Foo </span><span> Bar </span>
</p>

Inną efektywną metodą jest zadanie CSS, które używa font-size:0 do elementu nadrzędnego i daje font-size do elementu podrzędnego tyle, ile ty chcę.

p {
  font-size: 0;
}
p span {
  display: inline-block;
  background: red;
  font-size: 14px;
}

<p>
  <span> Foo </span>
  <span> Bar </span>
</p>

Powyższe metody mogą nie działać gdzieś w zależności od całej aplikacji, ale ostatnia metoda jest niezawodnym rozwiązaniem dla tej sytuacji i może być używana wszędzie.

Nie jestem do końca pewien, czy chcesz zrobić dwa niebieskie przęsła bez przerwy, czy chcesz obsłużyć inne białe spacje, ale jeśli chcesz usunąć lukę:

span {
    display: inline-block;
    width: 100px;
    background: blue;
    font-size: 30px;
    color: white;
    text-align: center;

    float: left;
}

Zajmowałem się tym ostatnio i zamiast ustawiać rodzica font-size:0, a następnie ustawiać dziecko z powrotem na rozsądną wartość, otrzymywałem spójne wyniki, ustawiając kontener rodzica letter-spacing:-.25em, a następnie dziecko z powrotem na letter-spacing:normal.

W alternatywnym wątku zobaczyłem komentarz, że font-size:0 nie zawsze jest idealny, ponieważ ludzie mogą kontrolować minimalne rozmiary czcionek w swoich przeglądarkach, całkowicie negując możliwość ustawienia rozmiaru czcionki na zero.

Używanie ems wydaje się działać niezależnie od tego, czy podany rozmiar czcionki to 100%, 15pt czy 36px.

Http://cdpn.io/dKIjo

p {
  display: flex;
}
span {
  float: left;
  display: inline-block;
  width: 100px;
  background: red;
  font-size: 30px;
  color: white;
}

<p>
  <span> hello </span>
  <span> world </span>
</p>

Myślę, że istnieje bardzo prosta / stara metoda na to, który jest obsługiwany przez wszystkie przeglądarki, nawet IE 6/7. Możemy po prostu ustawić letter-spacing na dużą wartość ujemną w rodzicu, a następnie ustawić ją z powrotem na normal w elementach potomnych:

body { font-size: 24px }
span { border: 1px solid #b0b0c0; } /* show borders to see spacing */

.no-spacing { letter-spacing: -1em; } /* could be a large negative value */
.no-spacing > * { letter-spacing: normal; } /* => back to normal spacing */

<p style="color:red">Wrong (default spacing):</p>

<div class="">
  <span>Item-1</span>
  <span>Item-2</span>
  <span>Item-3</span>
</div>

<hr/>

<p style="color:green">Correct (no-spacing):</p>

<div class="no-spacing">
  <span>Item-1</span>
  <span>Item-2</span>
  <span>Item-3</span>
</div>

Z nawiasami PHP:

ul li {
  display: inline-block;
}

    <ul>
        <li>
            <div>first</div>
        </li><?
        ?><li>
            <div>first</div>
        </li><?
        ?><li>
            <div>first</div>
        </li>
    </ul>

Zamierzam nieco rozszerzyć odpowiedź user5609829, ponieważ uważam, że inne rozwiązania tutaj są zbyt skomplikowane/zbyt dużo pracy. Zastosowanie margin-right: -4px do elementów bloku wbudowanego usunie odstępy i jest obsługiwane przez wszystkie przeglądarki. Zobacz zaktualizowane skrzypce tutaj . Dla zainteresowanych używaniem ujemnych marginesów, spróbuj dać to odczyt.

Najprostszą odpowiedzią na to pytanie jest dodanie.

Css

float: left;

Codepen link: http://jsfiddle.net/dGHFV/3560/

Specyfikacja CSS Text Module Level 4 Definiuje text-space-collapse właściwość, która pozwala kontrolować sposób przetwarzania białej przestrzeni wewnątrz i wokół elementu.

Więc, jeśli chodzi o twój przykład, musisz po prostu napisać to:

p {
  text-space-collapse: discard;
}

Niestety, żadna przeglądarka nie implementuje jeszcze tej właściwości (stan na Wrzesień 2016), Jak wspomniano w komentarzach do odpowiedzi HBP .

Dodaj white-space: nowrap do elementu kontenera:

CSS:

* {
    box-sizing: border-box;
}
.row {
    vertical-align: top;
    white-space: nowrap;
}
.column{
    float: left;
    display: inline-block;
    width: 50% // Or whatever in your case
}

HTML:

<div class="row">
    <div class="column"> Some stuff</div>
    <div class="column">Some other stuff</div>
</div>

Oto Plunker.

Wypróbowałem font-size: 0 rozwiązanie podobnego problemu w Reaccie i Sass dla darmowego projektu Code Camp, nad którym obecnie pracuję.

Najpierw skrypt:

var ActionBox = React.createClass({
    render: function() {
        return(
            <div id="actionBox">
                </div>
        );
    },
});

var ApplicationGrid = React.createClass({
    render: function() {
        var row = [];
        for(var j=0; j<30; j++){
            for(var i=0; i<30; i++){
                row.push(<ActionBox />);
            }
        }
        return(
            <div id="applicationGrid">
                {row}
            </div>
        );
     },
});

var ButtonsAndGrid = React.createClass({
    render: function() {
        return(
            <div>
                <div id="buttonsDiv">
                </div>
                <ApplicationGrid />
            </div>
        );
    },
});

var MyApp = React.createClass({
    render: function() {
        return(
            <div id="mainDiv">
                <h1> Game of Life! </h1>
                <ButtonsAndGrid />
            </div>
        );
    },
});

ReactDOM.render(
    <MyApp />,
    document.getElementById('GoL')
);

Następnie Sass:

html, body
    height: 100%

body
    height: 100%
    margin: 0
    padding: 0

#mainDiv
    width: 80%
    height: 60%
    margin: auto
    padding-top: 5px
    padding-bottom: 5px
    background-color: DeepSkyBlue
    text-align: center
    border: 2px solid #381F0B
    border-radius: 4px
    margin-top: 20px

#buttonsDiv
    width: 80%
    height: 60%
    margin: auto
    margin-bottom: 0px
    padding-top: 5px
    padding-bottom: 0px
    background-color: grey
    text-align: center
    border: 2px solid #381F0B
    border-radius: 4px
    margin-top: 20px

#applicationGrid
    width: 65%
    height: 50%
    padding-top: 0px
    margin: auto
    font-size: 0
    margin-top: 0px
    padding-bottom: 5px
    background-color: white
    text-align: center
    border: 2px solid #381F0B
    border-radius: 4px
    margin-top: 20px

#actionBox
    width: 20px
    height: 20PX
    padding-top: 0px
    display: inline-block
    margin-top: 0px
    padding-bottom: 0px
    background-color: lightgrey
    text-align: center
    border: 2px solid grey
    margin-bottom: 0px

Just for fun: proste rozwiązanie JavaScript.

document.querySelectorAll('.container').forEach(clear);

function clear(element) {
  element.childNodes.forEach(check, element);
}

function check(item) {
  if (item.nodeType === 3) this.removeChild(item);
}

span {
  display: inline-block;
  width: 100px;
  background-color: palevioletred;
}

<p class="container">
  <span> Foo </span>
  <span> Bar </span>
</p>

Istnieje wiele rozwiązań takich jak font-size:0,word-spacing,margin-left,letter-spacing i tak dalej.

Normalnie wolę używać letter-spacing ponieważ

1. wydaje się ok, gdy przypisujemy wartość większą niż szerokość dodatkowej przestrzeni(np. -1em).
2. jednak nie będzie to w porządku z word-spacing i margin-left gdy ustawimy większą wartość jak -1em.
3. używanie font-size nie jest wygodne, gdy próbujemy używać em jako jednostki font-size.

Więc, letter-spacing wydaje się być najlepszym wybór.

Kiedy używasz letter-spacing lepiej używaj -0.3em lub -0.31em nie innych.

* {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
  color: inherit;
  cursor: auto;
}
.nav {
  width: 260px;
  height: 100px;
  background-color: pink;
  color: white;
  font-size: 20px;
  letter-spacing: -1em;
}
.nav__text {
  width: 90px;
  height: 40px;
  box-sizing: border-box;
  border: 1px solid black;
  line-height: 40px;
  background-color: yellowgreen;
  text-align: center;
  display: inline-block;
  letter-spacing: normal;
}

<nav class="nav">
    <span class="nav__text">nav1</span>
    <span class="nav__text">nav2</span>
    <span class="nav__text">nav3</span>
</nav>

Jeśli używasz Chrome(wersja testowa 66.0.3359.139) lub Opery (wersja testowa 53.0.2907.99), to co widzisz może być:

Jeśli używasz Firefoksa (60.0.2), IE10 lub Edge, to co widzisz może być:

Długość

Określa dodatkową przestrzeń między znakami oprócz domyślnej przestrzeni między znakami. Wartości mogą być ujemne, ale mogą istnieć ograniczenia specyficzne dla implementacji. agenci użytkownika nie mogą dalej zwiększać ani zmniejszać przestrzeni między znakami w celu uzasadnienia tekstu.

Wydaje się, że to jest powód.

Dodaj letter-spacing:-4px; na rodzicu p css i dodaj letter-spacing:0px; do swojego span css.

span {
  display:inline-block;
  width:100px;
  background-color:palevioletred;
  vertical-align:bottom;
  letter-spacing:0px;
}

p {
  letter-spacing:-4px;
}

<p>
    <span> Foo </span>
    <span> Bar </span>
</p>

Innym sposobem, który znalazłem jest zastosowanie margin-left jako wartości ujemne z wyjątkiem pierwszego elementu wiersza.

span { 
 display:inline-block;
 width:100px;
 background:blue;
 font-size:30px;
 color:white; 
 text-align:center;
 margin-left:-5px;
}
span:first-child{
 margin:0px;
}

Każde pytanie, które próbuje usunąć przestrzeń między inline-block S wydaje mi się <table>...

Spróbuj czegoś takiego:

p {
  display: table;
}
span {
  width: 100px;
  border: 1px solid silver; /* added for visualization only*/
  display: table-cell;
}

<p>
  <span> Foo </span>
  <span> Bar </span>
</p>