Menu
I am using this CSS/HTML combo to emulate a two column layout:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div class="two-cols">
<div class="left-col">
<img src="http://stott.customer.netspace.net.au/images/aurora2.jpg" alt="Image"/>
</div>
<div class="right-col">
Text
</div>
</div>
</body>
</html>
.two-cols {
border: 1px solid black;
display: table;
width: 100%;
}
.left-col, .right-col {
display: table-cell;
width: 50%;
}
img {
width: 300px;
height: 200px;
padding: 0;
margin: 0;
}
JSBin here.
But there's an unwanted padding at the bottom of my image:
Any ideas why am I getting that and how can I get rid of that?
632
In order to get rid of additional white space, there are 3 properties that can be used: Using the display property. Using vertical-align property. Using line-height property.
If you try to put an image inside a <div> element that has borders, you will see an extra white space (around 3px) at the bottom of image. It happens because image is an inline-level element so browser adds some whitespace under the baseline to adjust other inline elements.
The padding-bottom property is used to specify the width of the bottom area of the element's padding box. That is, it specifies the area of space required at the bottom of the element's content, inside any defined border. Every element on a web page is rectangular.
The padding-bottom CSS property sets the height of the padding area on the bottom of an element.
The default vertical-align is baseline that is applied to img as well. Make it bottom and it works:
img {
vertical-align: bottom;
}
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
