All geek questions in one place

CSS: does a 2-pixel line appear below the image element (IMG)?

Can someone tell me why there is a line at the bottom of the image and above the navigation bar (background color, red in this case)? Both Firefox and Chrome display a red line, so I assume that it renders as intended. But I can not find the problem using the developer tools. Borders, paddings and fields are all 0, which is bewildering. Here's a stripped down version of the code, or jsfiddle.net/bvss4/9 :

<body> <div id="main-wrapper"> <header id="main-header"> <img id="title-image" src="http://i.imgur.com/JaYSY.jpg" /> <div id="main-navbar"> STUFF </div> </header> </div> </body>

CSS

 * { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } #main-wrapper { width: 90%; margin: 0 auto; border: 3px solid #888; margin-top: 20px; background: red; } #title-image { width: 100%; } #main-navbar { width: 100%; background: #333333; }

bad red line

+4
source share
3 answers

Adding display:block to your #title-image will fix it

  #title-image { width: 100%; display:block; }

Jsfiddle here

+10
source

Set vertical-align: bottom to the CSS image.

The reason this happens is because the images are displayed in a line with text. This means that they should allow a small space under the line in the case of letters such as y , g , etc., which fall below the baseline and cause a space.

By setting vertical-align to bottom , you move the image so that it aligns with the bottom of the text, avoiding this problem.

There is one exception that you should be aware of: if the image has a lower height than one line of text, it will leave a space above it to make room for this text, unless you set the containing element to line-height , which works.

+5
source

I just tried it on http://jsfiddle.net/nUacj/ - I set the vertical alignment: average instead of the base level, and it solved the problem. Will this be a viable solution for you or do you need it to be a basic one?

+4
source

Source: https://habr.com/ru/post/1390541/

More articles:


All Articles