Hi All,
I am working on creating a series of alert banners for our Help Centers site and wanted to get your thoughts on the CSS positioning used. Noticed that I didn’t convert my img to a block level element. Should I? Please see below:
Normally if you need img to behave as a block you still shouldn’t make it block, but rather wrap it in block element, like div, so it’s totally fine! Regarding rest of the rules:
.newpage_alert img {
width: 20px; /* If you use square icons then you might also want to indicate height */
padding-right: 5px; /* Prefer margin-right to push something that's outside */
position: relative;
top: 4px; /* This is unstable */
}
The last one bothers me a bit as browsers nowadays do all sort of modifications with fonts and here you basically depend on certain font size with certain baseline…
Yes, wrapping an image in correct way gives you ability to switch image or reuse component without getting worried about aspect ratio.
Here you’re pushing image down 4px so it looks centered. What if you/your boss later wants to increase/decrease font size, or user will use browser extension that will change font size or font face?
