In my attempt to align an icon and text side by side, with the icon on the left and the text on the right, I encountered an issue where the element's box seems to be consistently 1 pixel off. This misalignment is causing the text to not line up properly with the icon. Despite trying various adjustments, I have been unable to identify the root cause.
For a more polished version, refer to the following fiddle: https://jsfiddle.net/Ljzmu24q/
body {
color: black;
font-family: sans-serif;
}
body #pageWrapper {
margin-right: 10px;
}
/* == Content == */
div#content {
border: 0;
}
/* Additional CSS code snippets... */
The table in question utilizes the class infoboxtable and the problematic code resides within the td.td_box section.
I am seeking assistance in understanding why the alignment is consistently off by 1 pixel and how I can rectify this issue. Adjusting the text within the "Time to Craft" section to match the formatting of "Stack Size" did not yield the desired alignment, prompting further investigation.