¿Cómo puedo quitar o bien juntar más esa separación que hay entre los botones y entre los dos enlaces?
Esta separación que marco con flechas (he aumentado la imagen para que se vea mejor).
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Textos</title>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<style type="text/css">
a{
display:block;
text-decoration:none;
}
body {
background-color: white;
background-image: url(fondo.jpg);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
.texto1{
font-size:70px;
text-shadow: 2px 2px 10px black, 0 0 0 white, 0 0 0.2em grey; color: black;
margin-top: 0px;
margin-bottom: 0px;
}
.texto2{
font-size:50px;
text-shadow: 2px 2px 10px black, 0 0 0 white, 0 0 0.2em grey; color: Red;
margin-top: 0px;
margin-bottom: 0px;
}
table, tr, td {
margin: 0;
padding: 0;
border: 0
border-collapse: collapse;
}
</style>
</head>
<body>
<!-- <div> -->
<div >
<p>
<p>
<div>
<a href="#info1" class="inf"><button type="button" style='width:150px; text-align: left'>Libro Primero</button></a>
</div>
<div id="info1" class="oculto">
<p class="texto1">Texto 1</p>
<p class="texto2">Texto 1</p>
</div>
<div>
<a href="#info2" class="inf"><button type="button" style='width:150px; text-align: left'>Libro Segundo</button></a>
</div>
<div id="info2" class="oculto">
<table cellspacing=0 cellpadding=0 ">
<tr>
<td ><span style="font: 15pt comic sans ms; color: blue"> »</span></td>
<td ><a href="http://www.prueba.com">Tema 1</a></td>
<tr>
<tr>
<td ><span style="font: 15pt comic sans ms; color: blue"> »</span></td>
<td ><a href="http://www.prueba.com">Tema 2</a></td>
</tr>
</table>
</div>
<div>
<a href="#info3" class="inf"><button type="button" style='width:150px; text-align: left'>Libro Trecero</button></a>
</div>
<div id="info3" class="oculto">
<p class="texto1">Texto 3</p>
</div>
<div>
<a href="#info4" class="inf"><button type="button" style='width:150px; text-align: left'>Libro Cuarto</button></a>
</div>
<div id="info4" class="oculto">
<p class="texto2">Texto 4</p>
</div>
<div>
<a href="#info5" class="inf"><button type="button" style='width:150px; text-align: left'>Libro Quinto</button></a>
</div>
<div id="info5" class="oculto">
<p class="texto2">Texto 5</p>
</div>
</div>
<!-- </div> -->
<script type="text/javascript">
jQuery(document).ready(function(){
$(".oculto").hide();
$(".inf").click(function(){
var nodo = $(this).attr("href");
if ($(nodo).is(":visible")){
$(nodo).hide();
return false;
}else{
$(".oculto").hide("slow");
$(nodo).fadeToggle("fast");
return false;
}
});
});
</script>
</body>
</html>
td
agrega un espacio por arriba y por abajo y estoy intentando saber por que aunque sospecho que es por la fuente que le pones al>>
. Veo que en tu imagen el espacio es más pronunciado que en lo que se muestra en el ejemplo del snippet. Entiendo que será por que lo has aumentado y no porque haya otros estilos diferentes, ¿verdad?