1

ayuda por favor! como puedo hacer que el borde y/o padding de un elemento inline respete los limites de la caja del elemento padre o algun contenedor? resulta que me tope con este caso y comence a experimentar de distintas formas y no consigo hacer que el margen de los elementos inline de mi contenedor se limiten a las dimensiones del mismo, aparte de que les di a las cajas hijas (inline) bordes de 25px en todos los lados, la caja me termina midiendo "50x67" cuando debería ser 50x50 pero me esta agregando unos 17px mas de alto, no se porque ni de donde salen, si alguien pudiera aclararme esa parte tambien se lo agradeceria mucho, aqui el codigo y la imagen...

body{
    margin: 25px 0 0 0;
    padding: 0;
}
.uno, .dos, .tres {
    border: 25px solid red;
    width: 0.1px;
    background-color: red;
    margin-left: 10px;
    display: inline;
    line-height: 0px;
}
.over {
    border-top: 2px solid blueviolet;
    border-bottom: 2px solid blueviolet;
    border-left: 2px solid blueviolet;
    height: 200px
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <div class="over">
        <div class="uno">.</div>
        <div class="dos"></div>
        <div class="tres"></div>
    </div>
</body>
</html>

cabe destacar que tuve que darle un poco de magin-top al body para que se pueda mirar bien como el borde del hijo sobrepasa hacia arriba, el limite de la caja padre ...

introducir la descripción de la imagen aquí

2
  • No se entiende muy bien que necesitas. Puedes agregar un ejemplo del resultado esperado o explicarlo de mejor manera? Commented el 31 ene. 2022 a las 22:49
  • disculpa bro, en resumen lo que quiero logra es que el borde de los elementos "uno, dos y tres" no traspasen su contenedor que es el "over" como lo muestro en la imagen, se ve que lo sobrepasa hacia arriba y ps queria saber si se podia evitar esto y como evitarlo, ah y tambien se muestra que uno de los hijos mide 50x67, cosa que no comprendo porque sus unicas medidas son de 25px en todos los lados y por lo tanto deberia medir "50x50" ..espero haberme dado a entender
    – Kingsman10
    Commented el 31 ene. 2022 a las 22:57

2 respuestas 2

1

Los elementos inline se posicionan en la base vertical y los bordes se "dibujan" desde ese punto, por eso es que se salen del contenedor padre. Además, el contenido interno también afecta su altura, por lo que debes cambiar a inline-block y, por último, agregar vertical-align: middle; para que se centren verticalmente.

body {
    margin: 25px 0 0 0;
    padding: 0;
}
.uno, .dos, .tres {
    border: 25px solid red;
    width: 0.1px;
    background-color: red;
    margin-left: 10px;
    display: inline-block;
    vertical-align: middle;
    line-height: 0px;
}
.over {
    border-top: 2px solid blueviolet;
    border-bottom: 2px solid blueviolet;
    border-left: 2px solid blueviolet;
    height: 200px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <div class="over">
        <div class="uno">.</div>
        <div class="dos"></div>
        <div class="tres"></div>
    </div>
</body>
</html>

7
  • genial! me funciono como esperaba, muchas gracias, y disculpa que pregunte de nuevo, pero, sabrás de donde salían los 17px de alto que me daba demás al principio? porque ahora si mide los 50x50 que se esperaba
    – Kingsman10
    Commented el 31 ene. 2022 a las 23:15
  • @Kingsman10, como te dije en la respuesta, el contenido también afecta la altura de los elementos inline, de forma diferente a como se comporta con inline-block.
    – Triby
    Commented el 31 ene. 2022 a las 23:32
  • disculpa no se a cual contenido te refieres... creo que el único contenido que le di y fue a una caja, fue un punto pero lucia igual a las demás, no se si te refieras a eso o a otra cosa... tambien estuve probando hace rato con el mismo display-inline pero agregandole al padre la propiedad "font-size: 0px;" y siguio sobrepasando la parte superior del padre pero en lo que era el tamaño si tomo el espacio que le di de los bordes solamente, de 50x50, solo que ya no podria añadir texto, igual creo que esa no seria una buena solucion :(
    – Kingsman10
    Commented el 31 ene. 2022 a las 23:46
  • @Kingsman10, la propiedad inline reserva espacio para la altura del contenido, pudiste haber probado con line-height: 0px; pero sigo pensando que es mejor con bloque en línea.
    – Triby
    Commented el 31 ene. 2022 a las 23:50
  • ooh ya, comprendo, ya mas o menos, entonces con inline-block seria como si no lo reservara al principio pero si al momento de agregar texto no?
    – Kingsman10
    Commented el 1 feb. 2022 a las 0:09
1

Aquí te dejo como podrías hacerlo:

.container { /* dic.container (padre) */
  width: 300px;
  height: 200px;
  padding: 10px;
  display: flex;
  background: yellow;
  position: relative; /* Le decimos que div.container sea el padre de sus hijos con "position: relative;" */
}

.item { /* div.item (hijos) */
  margin: 15px;
  width: 60px;
  height: 60px;
  background: red;
}
<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Espero haberte ayudado!

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.