html - elementos - display inline-block o que faz



Como faço para remover o espaço entre os elementos de bloco inline? (20)

A especificação do Módulo de Texto CSS Nível 4 define uma propriedade de text-space-collapse , que permite controlar como o espaço em branco dentro e ao redor de um elemento é processado.

Então, com relação ao seu exemplo, você teria que escrever isso:

p {
  text-space-collapse: discard;
}

Infelizmente, nenhum navegador está implementando essa propriedade ainda (em setembro de 2016) como mencionado nos comentários para a resposta da HBP .

https://ffff65535.com

Dado este HTML e CSS:

span {
    display:inline-block;
    width:100px;
    background-color:palevioletred;
}
<p>
    <span> Foo </span>
    <span> Bar </span>
</p>

Como resultado, haverá um espaço de 4 pixels entre os elementos SPAN.

Demonstração: http://jsfiddle.net/dGHFV/

Eu entendo porque isso acontece, e também sei que eu poderia me livrar desse espaço removendo o espaço em branco entre os elementos SPAN no código-fonte HTML, assim:

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

No entanto, eu estava esperando por uma solução CSS que não requer que o código-fonte HTML seja adulterado.

Eu sei como resolver isso com JavaScript - removendo os nós de texto do elemento container (o parágrafo), da seguinte forma:

// jQuery
$('p').contents().filter(function() { return this.nodeType === 3; }).remove();

Demonstração: http://jsfiddle.net/dGHFV/1/

Mas este problema pode ser resolvido apenas com CSS?



Adicionar letter-spacing:-4px; no pai p css e adicione letter-spacing:0px; para o seu 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>


Adicione white-space: nowrap ao elemento container:

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>

Aqui está o Plunker .


Apenas por diversão: uma solução JavaScript fácil.

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>


Com parênteses do PHP:

ul li {
  display: inline-block;
}
    <ul>
        <li>
            <div>first</div>
        </li><?
        ?><li>
            <div>first</div>
        </li><?
        ?><li>
            <div>first</div>
        </li>
    </ul>


Embora, tecnicamente, não seja uma resposta para a pergunta: "Como faço para remover o espaço entre elementos inline-block?"

Você pode experimentar a solução flexbox e aplicar o código abaixo e o espaço será removido.

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

Você pode aprender mais sobre isso neste link: https://css-tricks.com/snippets/css/a-guide-to-flexbox/


Esta é a mesma resposta que eu dei sobre o relacionado: Display: Inline block - O que é esse espaço?

Na verdade, existe uma maneira muito simples de remover o espaço em branco do bloco inline, que é fácil e semântico. Ele é chamado de fonte personalizada com espaços de largura zero, o que permite recolher o espaço em branco (adicionado pelo navegador para elementos incorporados quando estão em linhas separadas) no nível da fonte usando uma fonte muito pequena. Depois de declarar a fonte, basta alterar a font-family no contêiner e voltar novamente para as crianças e voila. Como isso:

@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;
}

Terno a gosto. Aqui está um download para a fonte que eu acabei de fazer no font-forge e convertido com o gerador de webfont FontSquirrel. Me levou todos os 5 minutos. A declaração css @font-face está incluída: fonte de espaço zipado com largura zero . Está no Google Drive, então você precisa clicar em Arquivo> Download para salvá-lo no seu computador. Você provavelmente precisará alterar os caminhos da fonte também se você copiar a declaração para o seu arquivo css principal.


Eu tive esse problema agora e do font-size:0; da font-size:0; Descobri que no Internet Explorer 7 o problema permanece porque o Internet Explorer pensa "Tamanho da fonte 0!!? WTF você é um homem louco?" - Então, no meu caso, eu tenho o reset do CSS de Eric Meyer e com font-size:0.01em; Eu tenho uma diferença de 1 pixel do Internet Explorer 7 para o Firefox 9, então, acho que isso pode ser uma solução.


Eu venho lidando com isso recentemente e, em vez de definir o font-size:0 pai font-size:0 seguida, definindo o filho de volta para um valor razoável, tenho obtido resultados consistentes definindo o letter-spacing:-.25em recipiente pai letter-spacing:-.25em seguida, a criança de volta ao letter-spacing:normal .

Em um tópico alternativo, vi um comentarista mencionar que font-size:0 nem sempre é ideal porque as pessoas podem controlar tamanhos mínimos de fonte em seus navegadores, negando completamente a possibilidade de definir o tamanho da fonte como zero.

O uso do ems parece funcionar independentemente de o tamanho da fonte especificado ser 100%, 15pt ou 36px.

http://cdpn.io/dKIjo


Existem muitas soluções, como font-size:0 , word-spacing , margin-left , letter-spacing e assim por diante.

Normalmente eu prefiro usar o letter-spacing porque

  1. parece ok quando atribuímos um valor que é maior que a largura do espaço extra (por exemplo, -1em ).
  2. No entanto, não ficará bem com word-spacing e margin-left quando -1em um valor maior como -1em .
  3. Usar font-size não é conveniente quando tentamos usar em como unidade de font-size .

Então, o letter-spacing parece ser a melhor escolha.

No entanto, tenho que avisá-lo

quando você usa letter-spacing é melhor usar -0.3em ou -0.31em não outros.

* {
  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>

Se você estiver usando o Chrome (versão de teste 66.0.3359.139) ou o Opera (versão de teste 53.0.2907.99), o que você vê pode ser:

Se você estiver usando o Firefox (60.0.2), IE10 ou Edge, o que você vê pode ser:

Isso é interessante. Então, chequei o mdn-letter-spacing e achei isso:

comprimento

Especifica o espaço extra entre os caracteres além do espaço padrão entre os caracteres. Os valores podem ser negativos, mas podem haver limites específicos da implementação. Os agentes do usuário não podem aumentar ou diminuir ainda mais o espaço entre os caracteres para justificar o texto.

Parece que esta é a razão.


Experimentei a solução font-size: 0 para um problema semelhante no React and Sass para um projeto Free Code Camp no qual estou trabalhando atualmente.

E isso funciona!

Primeiro, o script:

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')
);

Então, o 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

Infelizmente, é 2015 e white-space-collapse ainda não está implementado.

Enquanto isso, forneça o font-size: 0; elemento pai font-size: 0; e defina o font-size da font-size nos filhos. Isso deve fazer o truque


Mais duas opções baseadas no Módulo de Texto CSS Nível 3 (em vez de white-space-collapsing:discard que havia sido retirado do rascunho de especificação):

  • word-spacing: -100%;

Em teoria, ele deve fazer exatamente o que for necessário - reduzir os espaços em branco entre "palavras" em 100% da largura do caractere de espaço, ou seja, a zero. Mas parece não funcionar em qualquer lugar, infelizmente, e esse recurso está marcado como "em risco" (pode ser retirado da especificação também).

  • word-spacing: -1ch;

Ele encurta os espaços entre palavras pela largura do dígito '0'. Em uma fonte monoespaçada, ela deve ser exatamente igual à largura do caractere de espaço (e qualquer outro caractere também). Isso funciona no Firefox 10 ou superior, no Chrome 27 e quase funciona no Internet Explorer 9 ou superior.

Fiddle


Ok, embora eu tenha votado tanto o font-size: 0; da font-size: 0; e as respostas do not implemented CSS3 feature , depois de tentar descobri que nenhuma delas é uma solução real .

Na verdade, não há nem mesmo uma solução alternativa sem efeitos colaterais fortes.

Então eu decidi remover os espaços (essa resposta é sobre esse argumento) entre as divs de inline-block da minha fonte HTML ( JSP ), transformando isso:

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

para isso

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

isso é feio, mas funciona.

Mas, espere um minuto ... e se eu estiver gerando meus divs dentro de Taglibs loops ( Struts2 , JSTL , etc ...)?

Por exemplo:

<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>

Não é absolutamente pensável para inline todas essas coisas, isso significaria

<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>

que não é legível, difícil de manter e entender, etc ...

A solução que encontrei:

use comentários em HTML para conectar o final de um div ao início do próximo!

<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>

Dessa forma, você terá um código legível e corretamente recuado.

E, como um efeito colateral positivo, a HTML source , embora infestada por comentários vazios, resultará corretamente recuada;

vamos dar o primeiro exemplo, imho isso:

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

é melhor que isso

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

Espero que ajude...




Uma outra maneira que encontrei é aplicar margin-left como valores negativos, exceto o primeiro elemento da linha.

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

tamanho da fonte: 0; pode ser um pouco mais complicado de gerenciar ...

Eu acho que as linhas a seguir são muito melhores e mais reutilizáveis, e economizam tempo do que qualquer outro método. Eu pessoalmente uso isso:

.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;}

Então você pode usá-lo da seguinte forma ...

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

Tanto quanto eu sei (posso estar errado), mas todos os navegadores suportam este método.

EXPLICAÇÃO :

Isso funciona (talvez -3px pode ser melhor) exatamente como você esperaria que funcionasse.

  • você copia e cola o código (uma vez)
  • então no seu html use apenas class="items" no pai de cada bloco inline.

Você NÃO terá a necessidade de voltar ao css e adicionar outra regra css para seus novos blocos inline.

Resolvendo dois problemas de uma só vez.

Observe também o > (sinal maior que) isso significa que * / todas as crianças devem estar em bloco.

http://jsfiddle.net/fD5u3/

Observação: eu modifiquei para acomodar a herdar o espaçamento entre letras quando um wrapper tem um wrapper filho.


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>





css