Buenas, tengo una duda. ¿Cómo es posible evitar que un enlace abarque todo el ancho de un contenedor? He probado con la propiedad display: inline-block, pero de igual forma no me arregla la situación.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 16px;
background-color: #fff;
}
body {
max-width: 1200px;
margin: 0 auto;
font-family: 'Roboto', sans-serif;
}
a {
color: #333;
}
header {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 2rem;
margin-bottom: 1.5rem;
}
header > a > img {
width: 120px;
height: auto;
border-radius: 50%;
margin-bottom: 1.2rem;
}
header > a {
color: #333;
text-decoration: none;
}
header > a:hover {
color: #0d0d0d;
text-decoration: underline;
}
header > a > h1 {
font-size: 2.7rem;
}
header > nav {
border: solid 1px #dedede;
border-left: none;
border-right: none;
padding: 0.2rem 0 0.5rem 0;
text-transform: uppercase;
font-weight: 300;
font-size: 1.6rem;
letter-spacing: 1px;
}
header > nav > a {
margin-left: 0.8rem;
margin-right: 0.8rem;
color: #858585;
text-decoration: none;
}
header > nav > a:hover {
text-decoration: underline;
color: #333333;
}
#articles {
width: 50%;
margin: 0 auto;
}
.article {
border-bottom: solid 1px #dedede;
padding-top: 0.7rem;
padding-bottom: 0.7rem;
}
.titular {
font-size: 1.3rem;
margin-top: 0.5rem;
}
.article > a {
text-decoration: none;
}
.article > a:hover {
text-decoration: underline;
}
.article span {
color: #a9a9a9;
font-weight: 300;
}
footer {
display: flex;
flex-direction: column;
text-align: center;
color: #333;
margin: 0 auto;
width: 50%;
margin-top: 2.5rem;
}
footer a {
color: #858585;
text-decoration: none;
}
.iconoSocial {
font-size: 1.6rem;
color: #858585;
}
.iconoSocial:hover {
color: #333333;
}
.contenedorIconos {
display: flex;
margin-bottom: 1rem;
}
.espaciado {
width: 1rem;
height: 1rem;
background-color: transparent;
}
#contenedorCreditos {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.iconoCredito {
font-size: 1.4rem;
}
.html5 {
color: #f16529;
margin-left: 0.2rem;
margin-right: 0.3rem;
}
.css3 {
color: #1c88c7;
margin-right: 0.2rem;
}
.corazon {
color: #d36060;
margin-left: 0.2rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pedro Fumero</title>
<link rel="stylesheet" href="css/styles.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700" rel="stylesheet">
<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
</head>
<body>
<header>
<a href="/"><img src="img/foto.jpg" alt="Foto del bloguero"></a>
<a href="#"><h1>Pedro Fumero</h1></a>
<div class="contenedorIconos">
<a href="http://google.com"><i class="ion-social-twitter iconoSocial primero"></i></a>
<div class="espaciado"></div>
<a href="#"><i class="ion-social-github iconoSocial"></i></a>
</div>
<nav>
<a href="#">Blog</a>
<a href="#">Talks</a>
<a href="#">Book</a>
<a href="#">Newletter</a>
<a href="#">Podcast</a>
<a href="#">About</a>
</nav>
</header>
<section id="articles">
<div class="article">
<span>August 7, 2017</span>
<a href="#"><h3 class="titular">CSS Utility Classes and "Separation of Concerns"</h3></a>
</div>
<div class="article">
<span>April 21, 2017</span>
<a href="#"><h3 class="titular">The $61,392 Book Launch That Let Me Quit My Job</h3></a>
</div>
<div class="article">
<span>April 3, 2017</span>
<a href="#"><h3 class="titular">Detecting Out of Sync Mocks in Mockery</h3></a>
</div>
<div class="article">
<span>March 2, 2017</span>
<a href="#"><h3 class="titular">What's KiteTail?</h3></a>
</div>
</section>
<footer>
<div id="contenedorCreditos">
Creado con
<i class="ion-social-html5 iconoCredito html5"></i>
<i class="ion-social-css3 iconoCredito css3"></i>
y mucho
<i class="ion-heart iconoCredito corazon"></i>
</div>
<a href="#">Pedro Fumero</a>
2017
</footer>
</body>
</html>
Fijense que si colocan el puntero, en un lugar fuera de los titulares, pero dentro del mismo contenedor lo toma como "parte del enlace", y yo quiero que sólo sea cliqueable el texto en sí, no el espacio vacío que pueda estar fuera de la caja que lo contiene. Lo mismo me sucede con el enlace que coloqué en el footer. Ya que el enlace es cliqueable en el 100% de ancho del contenedor. ¿cómo puedo evitar este comportamiento?