Cómo quitar el espacio entre los elementos inline-block?

Aquí, vamos a aprender cómo quitar el espacio entre los elementos inline-block en CS (Cascading Style Sheet)?

Introducción:

Esta pregunta se ha vuelto bastante popular. ¿Cómo espacios en blanco se quitan entre los elementos inline-block? Lo interesante es que hay numerosas soluciones para esto, pero no todos ellos son de fácil y la mayoría de ellos requieren JavaScript y todo. Por lo tanto, ¿qué pasa con las personas que acaban de comenzar la codificación y no tienen idea acerca de JavaScript y otros lenguajes? Bueno, no hay nada de qué preocuparse, hay respuestas que no requieren que usted pueda hacer uso de JavaScript. Por lo tanto, vamos a pasar y ver cómo esto es posible.

Soluciones:

Hay un par de respuestas a esta pregunta, pero vamos a discutir sólo tres de ellos. Como usted no quiere ser confundido en su etapa inicial de la codificación, además de estas respuestas son los mejores y que son muy fáciles de entender y aplicar. Por lo tanto, sin mucha demora pasemos con las respuestas.

Método 1:

En primer lugar, se puede resolver este problema mediante el uso de minimizada HTML . Bueno, qué significa eso? Derecho, significa que se puede minimizar el código de su HTML para lograr lo que se desea y que consiste en eliminar los espacios entre los elementos de bloque en línea.

Bueno, suena bastante fácil, pero ¿cómo se hace? class de eso, usted tendrá que mirar a la siguiente sintaxis For comprensión adecuada.

Sintaxis:

<ul>
<li>
first</li><li>
second</li><li>
third</li><li>
</ul>

Método 2:

Bueno, esto era un método de minimización de HTML, hay una manera más además de éste por el cual se puede lograr el mismo resultado. Por lo tanto, mirar a la sintaxis siguiente para obtener la idea.

Sintaxis:

<ul>
<li>first</li
><li>second</li
><li>third</li>
</ul>

El código aquí puede parecer un poco extraño y no es el código convencional pero aún así, este truco ayuda a eliminar los espacios entre los elementos inline-block. Bueno, estos dos sería sin duda el trabajo, pero no es un truco más que se puede utilizar for la solución del problema.

Método 3:

Usted se sorprenderá de saber este truco. En este truco, todo lo que necesita hacer es hacer uso de los comentarios durante la creación de elementos inline-block. Bueno, sí que suena un poco confuso, pero el truco es muy eficiente y que seguramente va a conseguir lo que desea. Así que echar un vistazo a la sintaxis for la aplicación.

Sintaxis:

<ul>
<li>first</li><!--
--><li>second</li><!--
--><li>third</li>
</ul>

El código aquí puede parecer un poco extraño y no es el código convencional pero aún así, este truco ayuda a eliminar los espacios entre los elementos inline-block. Bueno, estos dos sería sin duda el trabajo, pero no es un truco más que se puede utilizar for la solución del problema.

Usted se sorprenderá de saber este truco. En este truco, todo lo que necesita hacer es hacer uso de los comentarios durante la creación de elementos inline-block. Bueno, sí que suena un poco confuso, pero el truco es muy eficiente y que seguramente va a conseguir lo que desea. Así que echar un vistazo a la sintaxis for la aplicación.

Sintaxis:

<ul>
<li>first</li><!--
--><li>second</li><!--
--><li>third</li>
</ul>

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style: none
}
li {
background: pink;
display: inline-block;
padding: 4px;
}
</style>
</head>
<body>
<ul>
<li>this</li>
<li>is</li>
<li>Includehelp</li>
</ul>
</body>
</html>

salida

How to remove the space between inline-block elements? - 4

Pues bien, estos trucos son bastante sorprendente. Pero estos no son todos, hay más trucos por ahí, pero si usted acaba de comenzar su trabajo en el desarrollo web a continuación, estos trucos seguramente le ayudará cada vez que se encuentra con el mismo problema y de lo contrario, está siempre libre para explorar algunos otros trucos cuales se puede encontrar adecuado.


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *