Si tiene elementos HTML div uno al lado del otro con display: table-cell; y desea establecer un margen entre ellos, entonces no habrá ningún efecto de margen.
Ejemplo:
HTML
<!DOCTYPE html> <html> <body> <div style="display: table-cell; margin: 50px; background-color:blue;"> 10 </div> <div style="display: table-cell; margin: 50px; background-color:blueviolet;"> 20 </div> </body> </html>
Salida: podemos concluir del ejemplo anterior que la propiedad de margen no está afectando nuestra salida.
sin efecto de margen
La propiedad de margen se aplica a todos los elementos, excepto a los elementos con tipos de visualización de tabla que no sean título de tabla, tabla y tabla en línea. En palabras simples, podemos decir que la propiedad de margen no es aplicable en la pantalla: elementos de celda de tabla. Cuando lea más sobre esto, sabrá que la propiedad de relleno no crea espacio entre los bordes de las celdas. Ahora, surgirá la pregunta en nuestra mente de cómo usaremos la propiedad de margen.
Existen diferentes métodos con los que podemos establecer la propiedad de margen en las tablas.
Ejemplo: podemos usar la propiedad de margen usando la propiedad de espacio entre bordes . Recuerde que debe aplicarse a un elemento principal con una pantalla: diseño de tabla y borde colapsado: separado.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.table {
display: table;
border-collapse: separate;
border-spacing: 15px;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
padding: 5px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="table">
<div class="row">
<div class="cell">Geeks for Geeks</div>
<div class="cell">Portal</div>
<div class="cell">Discussion</div>
</div>
</div>
</body>
</html>
Salida: se concluye de este ejemplo que puede establecer la propiedad de margen de esta manera.
espaciado de bordes y colapso de bordes
Ejemplo: el segundo método para usar la propiedad de margen en divisiones internas.
HTML
<!DOCTYPE html> <html> <body> <div style="display: table-cell;"> <div style="margin: 15px; background-color: yellow;"> Geeks For Geeks </div> </div> <div style="display: table-cell; "> <div style="margin: 25px; background-color: red;"> Portal </div> </div> </body> </html>
Producción:
márgenes div internos
Publicación traducida automáticamente
Artículo escrito por jyotics038 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA