Menu
I have a div that has a mystery 5px bottom padding added to an image contained within it. I've tried resetting CSS padding and margin for all elements but to no avail. What am I missing?:
JSFIDDLE: http://jsfiddle.net/vbFx9/
HTML:
<div id="list"> <div id="boxscroll"> <div class="list-result"> <img src="images/ps-result.png"> </div> <div class="list-result"> <img src="images/ps-result.png"> </div> <div class="list-result"> <img src="images/ps-result.png"> </div> </div> </div> CSS:
.list-result { padding:0; margin:0; width:100%; border-bottom: 1px #000 solid; background:#f9f9f9; } .list-result:hover { background:#e9e9e9; } #list { top: 100px; bottom:40px; right: 20px; position: absolute; width: 20%; max-width:300px; } #boxscroll { font-family:'Open Sans'; background:#f9f9f9; overflow: auto; max-height:100%; border: 8px solid #fff; } 
561
The gap or extra space under the image isn't a bug or issue, it is the default behaviour. The root cause is that images are replaced elements (see MDN replaced elements). This allows them to "act like image" and have their own intrinsic dimensions, aspect ratio....
Padding is used to create space around an element's content, inside of any defined borders. This element has a padding of 70px.
to fix this, you simply need to update the box-sizing parameter and set this to border-box in your css. Or you can do this for all elements by simply adding the following. This tells the browser to account for any border and padding in the values you specify for an element's width and height.
Display Property: The most commonly used solution is used to change the display property of the <img> tag inside the <div> container from default 'inline' value to 'block' using display : block property.
No padding does not give any space around the image. It strictly sticks to the border. You can see it in the above 1 st image. Padding class has with padding 50px and 50px border.
How does Image Padding Work in HTML or CSS? Padding is always created space between innermost portions, whether it is image or content. Padding with image defines by img tag in CSS only. Syntax 1:
An element's padding is the space between its content and its border. Note: Padding creates extra space within an element, while margin creates extra space around an element. This property can have from one to four values.
It strictly sticks to the border. You can see it in the above 1 st image. Padding class has with padding 50px 20px 50px and 5px border. Due to this padding around the image top 50px, left and right 20px and 50px bottom respectively.
use the following css: working jsFiddle
img{display:block;} Images are by default displayed inline - which causes the padding below the image. (because of line-height)
165
Answered here. Use
.list-result { line-height: 0; } Fiddle
32
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
