espaciado de bordes extraña en html / css

StackOverflow https://stackoverflow.com/questions/903990

  •  05-09-2019
  •  | 
  •  

Pregunta

Estoy intentando crear un menú horizontal con una barra de borde grueso que muestra cernía sobre el elemento. Sin embargo, por alguna razón hay un pequeño hueco en el extremo derecho de la barra de Firefox y Chrome. Extrañamente, IE lo muestra sin la brecha. Firebug no muestra ninguna razón para esta diferencia.

He intentado utilizar divs simples y todavía aparece. He destilado se reduce a un solo HTML de ejemplo, con sólo divs.

¿Alguien puede explicar esto y dime cómo deshacerse de esa brecha? 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Weird border spacing</title>
    <style type="text/css">
    div.outer
    {
        border-top: dotted 1px lime;
        margin: 10px;
    }

    div.outer div
    {
        display: inline;
        margin: 0;
        padding: 0 12px;
        border-left: solid 1px silver;
        border-top: solid 3px red;
    }        
    </style>
</head>
<body>
    <div class="outer">
        <div>First</div>
        <div>Second</div>
        <div>Third</div>
    </div>
</body>
</html>
¿Fue útil?

Solución

display:inline raramente funciona bien. Considere el uso de float:left lugar.

Otros consejos

Floté el div interior izquierdo que fija el espaciado extraño y el div externa izquierda que forzó el div interior para estar dentro de la misma. Puede ajustar los estilos más para adaptarse a sus necesidades. 

div.outer{border-top: 1px dotted lime;margin: 10px;float:left;}
div.outer div
{
    float:left;
    margin: 0;
    padding: 0 12px;
    border-left: 1px solid silver;
    border-top: 3px solid red;
}

También puede eliminar las nuevas líneas entre los divs para fijar sólo los espacios.

Trate de añadir: 

body {
    margin: 0;
    padding: 0;
}

Los navegadores tienen diferentes valores predeterminados para estas propiedades CSS.

la brecha es causada por el / nueva línea espacio de rotura entre la <div>. Para solucionar este puso toda la <div> en la misma línea sin espacio entre ellos. Sin embargo, recomendaría re-pensar el css, posiblemente utilizando la lista <ul>

La razón de que está recibiendo el espacio se debe a la interpretación de los espacios Elementos en línea como algo para ser prestados. Esto le permite hacer:

Hello World

y todavía tienen 2 palabras separadas. Para eliminar el espacio que tiene a ... bueno, quitar el espacio. Cuando usted está tratando de poner juntos los elementos ras para el diseño, como ya se ha mencionado, el uso de float:. Izquierda es la opción preferida

display: inline-block la declaración para el div.outer div selector puede ser lo que quiera.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top