How would I fix these spacing issues when text is added in?
If you click on one of the links on the page, it’ll open into another window where you’ll be able to see the spacing issue I’m talking about.
These numbers when text is added in should be closer together.
font-size: 22px;
Is adding the green background past its borders which shouldn’t be happening. Which is causing it to be uneven when the whole thing is centered in the middle.
Text Added:
https://jsfiddle.net/xeqtcp5k/10/
90 top
111 Bottom
CSS
.wrap {
display: table;
margin: 0 auto;
background: green;
}
.inner p {
width: 300px;
height: 100%;
border: 1px solid red;
font-weight: 900;
font-style: normal;
font-size: 22px;
font-family: "Times New Roman", Times, serif;
padding: 5px;
color: #0059dd;
}
<div class="wrap">
<div class="inner">
<p><span>Text, text, text, Text, text, text, Text, text, text, Text, text, text, Text, text, text</span></p>
</div>
</div>
Text Removed:
https://jsfiddle.net/xeqtcp5k/4/
157 Top
156 Bottom