<h1>Resetting links</h1>

<h2>The problem</h2>

<p>(link as parent with green border / div as child with red border)</p>

<!-- example of the default -->
<a class='default-link' href='#'>
  <div class='block'>
    block-level element in a default link
  </div>
</a>

<p>^ problem revealed! (inspect)</p>

<p><a href='https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a' target='mdn/a'>Links</a> are <code>display: inline;</code> by default. That means they aren't cut out for containing <em>block-level</em> elements. That's just not their specialty.</p>

<p>That was fine for the 90s, but these days links are use in many more places than runs of paragraph text.</p>

<p>There are probably more links <em>wrapped around images</em> and various other components than there are regular ol links now. So, it makes sense to reset them to block elements as a default. Then you can replace the regular link styles in paragraphs specifically.</p>

<h2>With the reset</h2>

<a href='#' class='product'>
  <img src='https://peprojects.dev/images/square.jpg' width='400'>
</a>

<p>Example paragraph with <a href='#'>a link</a> in it.</p>

/* GLOBAL LINKS RESET/SETUP*/
a {
	display: block;
	text-decoration: none;
	color: inherit;
	/* remove default link styles */
	/* set links to be blocks so you can wrap thing */
	/* inline elements can't have block elements inside! */
}

p a { /* "all links in paragraphs..." */
	display: inline-block;
	text-decoration: underline;
	color: blue; /* put back styles for normal links */
}
/* yes! you might also want to do this for other headings and list items etc --- this is just a basic use-case */


.product img { 
  /* note the other responsive image Pen */
  display: block;
  width: 100%;
  height: auto; /* would be site-wide setup */
}

.product { /* in use as block-level element */
  max-width: 150px; /* clean! */
  border: 5px solid dimgray;
}




















































.product:hover {
  border-color: pink;
}


/* for explanation only */
a.default-link {
  display: inline;
  color: blue;
  text-decoration: underline;
  border: 4px double green;
  /* problem revealed! */
}

a.default-link .block {
  border: 1px solid red;
  padding: 10px;
}





/* presentation only */
p {
  max-width: 78ch;
}

body {
  padding: 40px 10px 100px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.