Removing Descenders with CSS

HTML

<div class="vertical-align-on-img"></div>
<div class="font-size-0-on-parent"></div>
<div class="line-height-0-on-parent"></div>
<div class="display-block-on-img"></div>
<div class="float-on-img"></div>


<script type="text/template" id="content-tpl">
	<div class="controls">
  	<div>
    	<h4>Parent display:</h4>
      <input type="radio" name="parent-display" id="inline-parent" value="inline">
      <label for="inline-parent">inline</label>
      <input type="radio" name="parent-display" id="inline-block-parent" value="inline-block">
      <label for="inline-block-parent">inline-block</label>
      <input type="radio" name="parent-display" id="block-parent" value="block">
      <label for="block-parent">block</label>
      <input type="radio" name="parent-display" id="float-parent" value="float">
      <label for="float-parent">float</label>
    </div>
    <div>
    	<h4>img display:</h4>
      <input type="radio" name="child-display" id="inline-child" value="inline">
      <label for="inline-child">inline</label>
      <input type="radio" name="child-display" id="inline-block-child" value="inline-block">
      <label for="inline-block-child">inline-block</label>
      <input type="radio" name="child-display" id="block-child" value="block">
      <label for="block-child">block</label>
      <input type="radio" name="child-display" id="float-child" value="float">
      <label for="float-child">float</label>
    </div>
    <div class="checkbox">
    	<input type="checkbox" id="hide-text">
      <label for="hide-text">Hide Additional Text</label>
    </div>
  </div>
  <br>
  <div>
  	<a>
    	<img src="https://www.placehold.it/200x200">
      <span>Additional Text</span>
    </a>
  </div>
</script>

CSS

body {
  color: #444;
  font-family: arial;
  letter-spacing: 0.4px;
  text-align: center;
}
body > div {
  padding: 40px 0;
}
h2 {
  color: #27f;
  text-transform: uppercase;
}
h4 {
  color: #6bf;
  margin-bottom: 4px;
}
input[type="radio"], label {
  cursor: pointer;
}
.checkbox {
  margin-top: 15px;
}
a {
  background: #6bf;
  display: inline-block;
  cursor: pointer;
}

.vertical-align-on-img img {
  vertical-align: top;
}
.font-size-0-on-parent a {
  font-size: 0;
  vertical-align: top;
}
.font-size-0-on-parent a > * {
  font-size: 16px;
  vertical-align: top;
}
.line-height-0-on-parent a {
  line-height: 0;
  vertical-align: top;
}
.line-height-0-on-parent a > * {
  line-height: 1.15;
  vertical-align: top;
}
.display-block-on-img img {
  display: block;
}
.float-on-img img {
  float: left;
}
.float-on-img a:after, .clearfix:after {
  content: '';
  clear: both;
  display: table;
}

JavaScript

// Page setup
$('body > div').each(function() {
  var el = $(this);
  el.prepend('<h2>' + this.className.split('-').join(' ') + '</h2>');
  
  var content = $($('#content-tpl').html());
  content.find('input').each(function() {
    $(this).prop('name', $(this).prop('name') + '-' + el.index())
      .prop('id', $(this).prop('id') + '-' + el.index());
  });
  content.find('label').each(function() {
    $(this).prop('for', $(this).prop('for') + '-' + el.index());
  });
  
  el.append(content);
}).after('<hr>');
$('[id^="inline-block-parent"], [id^="inline-child"]').prop('checked', true);

$('.display-block-on-img input[id^="block-child"]')
	.click()
	.siblings().not('[for^="block-child"], h4, [id^="float"], [for^="float"]').remove();

$('.float-on-img input[id^="float-child"]')
	.click()
	.siblings().not('[for^="float"], h4').remove();


// Handle controls
$('input[type="radio"]').change(function() {
  var val = $(this).val();
  var target = ($(this).prop('name').slice(0, 6) === 'parent'
      ? $(this).parents('body > div').find('a')
      : $(this).parents('body > div').find('img'));
  target.parent().removeClass('clearfix');
  
  if (val === 'float') {
    target.css({display: 'block', float: 'left'})
    	.parent().addClass('clearfix');
  } else {
    target.css({display: val, float: 'none'});
  }
});
$('input[type="checkbox"]').change(function() {
  var target = $(this).parents('body > div').find('span');
  $(this).is(':checked') ? target.hide() : target.show();
});