In the following web page, there is a gap of a few pixels between the image and the div. (I've tested in Firefox 3 and Safari 4.)
How can I close the gap?
body {
background-color: black;
}
img {
width: 250px;
height: 70px;
border: 0;
margin: 0;
padding: 0;
}
div {
background-color: white;
border: 0;
margin: 0;
padding: 0;
}
<html>
<head>
<title>Test Page</title>
</head>
<body>
<img alt="Stack Overflow Logo" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAccAAABvCAMAAACuGvu3AAAAw1BMVEX///8iJCb0gCS8u7sAAAAfISP19fURFBccHiDJyMi3trYJDRFOUFEZGx30fRwWGBuVlpft7e3++vfX2Nimp6j2mluJiov0hinAwMAAAQnk5OQmKCljZGZzc3Q0NjcABwzzdwD0exMtLzHR0dJaW1xrbG3c3Nw6PD6trq5/gIH+9e45Ozz+8eednZ5FRkdSU1T3q3f5w5/1ijn71L395NH6yav1kET828j96Nj4tIf5wJr3qXH2lU/2n2b4soP1iTXzbwCyXU06AAAQuklEQVR4nO1caXuiOhQWBRJERKq1ilVE3Fttp/s2M/f//6qb5CQh4FLbOrXtk/dLJSThkDc5W0ILBQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ2Nn4SbQwugsQccPf93f2gZND6Mm79xsTg/tBQaH8SvarVYjH8fHVoOjQ/hT79I0X86tCAaH8I18FisahP5vfEIRFZPtIn83nipApG/Dy2IxofwAIq12L89tCQaH8ItN5GxTgd8bwgTeadN5LfDXOFszk1krE3kd8P85UUh8iHmmlWbyG+G5zj++5BeChPZf9jcROPr4Q9ZgFV19V3G2kR+P/DlFz/KEmkiLw8olsbbcNMXIeOlTI/fVLWJ/G6YHwsi45dzUShMZPV8W1ONL4VH7qAWq0WZH3/mJvLkkIJpvA23Ra5Hq1WhSI+uuIn8c1DJNN6Em5OqMJJP3EjeiILrw4qm8Rac/xW6tf/MifzFTeSJNpHfCZfS2xHECRN5p095fCc85b2d+d/PjSLHSb1uf86jXsHYKU8JiDD1Bv0xbR1aorfguprzdm7izzSR9sQ0zfpnPOkVtIaeGbluZIWFQsN0CczhoWV6E26K0tsBL1UGJJ9hIu0KtowvwOPM9CyDwBpQHl360zs9tFBbcfmSW2hqSoClVn9zE/nyCSbyi/A4igzAt+FxHlfju+sMQ0ePksgreh7g/C1RpNNoND7Aw9fgsdw2vhuPT2yb4+X2KFsojOQJXaz3Md9T3mFBzkzXXLxfnK/B4xJzFj2/8z14POJ89f/+UklKvZ34F7l86tMqv3bpsIkM97vzGJpAIxqMRt3gW/Ao4nxCU/ykODIPV5mUwEscn+y2n/wTeJwy3gx/yq+/Po/zK+GcUr1Z/JNydXQsiIyPzwvnJ8877ib/BB4XjDcs44yvz+PR7V2sMnlymTL5RxJ5d1M439VX/Qk81hBbjl1x/fV5JExeZ5nsP8sjq4rO3T101DweDPfHfYXJal8GlDecYeWwx6v4HB7DxGm10mp2AFCr8KI0xzdutVpOpkpBaWaTDh3e4648EilKrfE2KXLX6+TcJ26e41hhUgaU5y+0OH7e3NIOwjBQ86HreAzG9Xp9HK7vgN5JO1jl0abINBk3ewb2EcKD0xKUTN0OBVYeMUWsyORFSXdgIYR8Y1JLB77AmhkkREy6BunQx4MmrQ884goJhRcNewOP9e6ASWENRg6UNNgjjU4qfs2n3acPbHpMqGjtSOwFD5fFDJMvEIbMn2Pi52xycYJpt7LsTZaVUU3KTnhENUIuBVRqnE46GBuDs4tuK5cBDxujpeF1epVuid9Z4bG2rFSWU6XAnnWQBTkzy4uGCXuGb1FEygS68GiJt2QXySnyeRvsdppSCpPWwYNxDSPeIxqUBI8GdkV+dZXHoGtJKXw0YlQliEnhlmWtJRUiSqU/w7SC/08V9MOfqsokCSgZfY/9TVuPdrPT9jGRDGPfbQ+59IRHA5kMTXo97bU9+sJ0wHxzUlZ7WBiRT2ijd9o9WFp5HpsRxmZNaRNWIstI4XtslLo+G+k0kx1A6OCyuy3kK00styIUG6RtBkOlS8+0BY9b8jn1HspI4bMlObCy+rjOmPYupFDQr5sZhP1j/hQrLk81jh8pg7cbPtUJPdcyPBRFroswff8lG/4mHwO+OGYmNizkRqYZIY9McSAX3qrSJq/pkZuuR8gEtnI8ziLDyKSHwoFKCXtOgxS3WORuGVKFlV1gIWA3rWwbtOQrkqffcHoLo3rhdR6TCGc6JNJTImesnYVEtQWfTEFWqM56C7NHHP26U12eOL7cGPwHE8/A0XBRLk0Xs0rkE4UlecSIkEOHl9BIRs1qLsqJU66duuTtTTEZgyVhBPmntWmpMfLI7/askOeR0dhQH0ueykfOkkNIVavPLl1Zd8Tq+SPys+5CVcvzfT78iFMi06iSxg7tTPDIlO4aHsOeoDGVwiD1HGgn9914NVcoVpjjWK7Pf4h5LqAsbto+7iIDLx1h1cZdv+MIWfFwsaiBmnQsjLpy+jmU+wmfnaeIqiB+bzxCFqIkZHhsRmRyZ5wmGFFquowB4qPN9BYfoiWvZ0O9iG79nsIKRpPRrLvknHLVlqbDkYvILMMGewnOY6fX6w0ma3iccSk84ie5XD+gLp3bmdkk0nveiLfjtz/gzq/FfO1iO7p+UZjclFQddywDJUpBizttzM9Ji52MVkyIBTFhdpbIGLaVe00oV3mkqzFSbWOh0AEa/LPSeJzMOJEmYSuBderzeQEbFnhJ5ozDlduMzh+71MEK4YJHf9BMkunSjeAlgEdvFHBnLcdjCHbQQBet8djpQv8WJlKPGKnCQIpJZ0Qw3QPg1dt3eHz7X3z8eL2GTBJQcpenerXBVyU0pPZcBeWxqVzX83f5cEywgWbqLZgUCo+jvG2kswIGkE/wBewS+jPoT1Fh4PewB5x68idFCA4KYoc0OI/eEAZ6xufiK/HjNOIzAy756nTJjCuBmR5Ad0NhAyJY/ZC2xRf7PrbyGFNnplp8ebx/yNH1cAkBZbzpf6/UNoX7eR6zSEyyFOh7EEbwZE2FlMeRm7eNMrATqpnTxZYd+BTcYw1gxVBDFbIlbHVkH1OFJM4jCtY9ZiOPwA8+E7fP5BIPOvK5qVqVPc1gcm0enffh6FjuTcUnd7+f7s9VMh8uT+Itxx03pm228xi0DYuxQNs31lQQPNpUXaH8E8B7SftvMSIsGuON+RAGaTmukBnTcnODB0bMMujvtpEljOMVHg1Y0TJ6aICbakgBXWYMFkKtcrfZhl1NMynsF/OT1J8pVqtxv/py+esmzYc/PBb7GxNyREfsplezIBGU1Qs5XeM1FTiPdpfoLr+2epONhCMLQMOx+Q/601XCSTbRgBPXSXuBiibVCsBjVMo9ZzuP4EMpXjXYZgunHtEofQ5Dmz4hZMJavX2r1Yd+MQeyMPv9uz+3gsz548b8eII2xLOv8OgDjyHx6JfrXogTfErHw8rP3KAHa046wDZ4gG1q7MC1YUPI/Ua2NrkSbCQC9SFMBjqLgEfk5J6zncdQCU1BLFAFfiJcGfGK9MEL2heLf6AXf1bYM5761WqeSSAzjq8ub2+2bzgOyZR3T50wT8Z6Hm2O0IOXHJsbtg8ojx1nyO1g7mYA4ZqXmrMLxgnLfMFoWjgQuhTyKD3u4SIJKGDq7V081oHHM/nmNlhj1g1ojCjhjYjPS7Uwe2fQue384v8wbh5/31X78Toui1TLXh1vzgKQBUmzID7qLSsXw9GsloixXeExKM8uKksOslDYOxE3R0ZVGVDV2ZmQOeJ3jEwAw7oCBWakPA4VZQphCOWUe6tMXVi5XI4AU87v4jEBHpVJNkhdYLb82AhcUNHcEjDrtgoBN4//4pD1+cP15d1JdT2XxerWo8fJgM5sC2PseT4yJzUQMM9j44wmYQXE3GxtCluYCbSoq0AHz8xmsALGj9VZ4ZF5TBCU0NE2rLSa/494VJVFL+WR36yAn0zflTUmijXxUyXxQTgM+TB0fnP7fNInC3OFzSpbjzY0W3Gz7CYyXYQ8DIYgmjAiczyOTGx4rinBeSxF23gko1xjWS0ve4Sb87hhPcLSswYhpMf4roK1olcB/2g9CiECFizSJmO2S4B5J2ud9DfCLpcIynmpGY7uny7v8mTC56t2iWHd1w31aW02uphYJs2c+ixHkuVxFhlWNJzWQ47E22U9QtyYkKWUDSADI28fK6l9FMMflfhfeE+ee5nVcmi+28/Zah+5dkcJs9zMAWNzDTnMvbKsdU76GwE8ltbySHE0vyYmM5Yms3oMzVobeYT7dhA2aNK7TYczw6PjEvWmNhT+6jY/R2YgyZBYA/W9ub/aTv3Vs9RfJQMMrulwyfTDEtgGT8hanwv7iL/aW+evily5P/NkHXB4ugMm3LLwcbzGI8M8NZk8mfMaj/AuxKwz7zrDYzefLZBxB9qQ9qc8irgxJLShUe6mkYkfIdQWGwzgSYAmFULA+nDXS/8uHnn8mE6NBB4LpxECmFo47QF4h62PvSRzduKR4fyemkz+r+Z34pFaDbYEMjySgc3mvEQeIJhg9ndVRjVBMDWZx5cin88B18byeE8N8VWGwi3s+flrneP38chNbho9TzmxcKWG/+V8ibuPZM7uPDIc3UMEuRuPZPEwNaLySOJxa5Lxs0mcDPzNfNhUWpExs/9ITIulOuoivyqKYISECpUbEYaSja6DTW0rAxjI32/jkWfT+WxKHVZQq0JllpTNMFtpDnX2EXXkeDx6DaLZzjxOcjyGZ3kenTbnsdxebyCzPI7bRmZXhO93yI0h2LhKUyQjeVggVeegbHG6+usVueG2I49lnlHj02WabnBQNLOXYUdMJtFBkCbM95LMyfJ4/3L8Cn5DVm49j7kzbEyv0jWwcNORt1f0apPr1YLtWdxRF4B6+XMdZETbyjAbfOdvWB7b9S6PDU3ZT7oWTPlYvhq8s0ZAM0pBreNhvue9K491vl3WrbOje4Ipt1sKbWfE9x+lvRwJNSo1b0UcH2jv5ZPmLI/X/eor+LuNx2EubCAqjvFHIgq2zyAKMwETHQFuFwnfVqQouxZc5Hi0BzijjIQF9CISi/LFp0TkgVCsXiUtg20lw3LNXqUyMGn2AlswCDvyGIjtaxM+lhbnAXwiRZtLkR6Ck/sc0iIIxapGvh9Anse1SRwFV1t4HLroTHl9m57SYClLun8kN/HLxBxaaTa9ZWFD8FjoUdsntJ89MzGbvvnzciVCnKs4eZXcMSsjuxEkTnmpKXxHqjWLJZQY99BoRx6F6hTLzp6knovsWupteZwjPc/DH7s+ZH4z9shjzbQM7FVqSRiE4bg865E3j0CdkliDuASNKf2a1V4SsnClPCaoT4eeheV6LNQH5B5aLurkVmNCt0+oH7FyfpWYPAunTI17uSG0Mgs+gTFUU3dkgeTPy5Fnjdha2ZXHwEsPVlHhEnFgK5VCGR7+9aTiaYsS9Rzu+7FHHu0ZPeuIUTSYTAYoIobKck9BjYQDegrSddk5xoRpsYge0HUjz/IrPcljIaHkY5c0dmk6yD1lm615HsekB0+JnlmrFBhn95pBiebCjBrycqPeBVl35bFQwp7KY6HlZXr0jPJKc3ZikoMrVnMvavWtPFa36dVCi54vZkcDWfbETQ9EjSOX6hHwGBPGEa1mWL7ZDWh0It4vHJoii03vsaFd/S6gRsagraw5tZXXHuQCMjBOUY4ZZynbkEdFlniXnXksJBPTZ4fBuTtTX6qyVzLZNocZcdUdHxuQYirsBTke45NXcLeNRzJHRz7NkyPkts3JQv0apVahJ8qBWHtxZrJ/YGJ2uk4hIDe8dJ62ugjuoS7ng/3flSw32Mz9KxanOyCtiI+BTleEClk2/mwlTHNmZ/QsdNs0jW66dnjyPt9LE4qzcVGpu+zRjzMEZa0RBim8bj64h+ZqAuOClezpwONb40ceQG6OH+36tFarLRqtID9u6sc1duBMp9My/Hej/Ec3dlIm9xI703JNX9kyOyxPy6t72BtqixuhU24lGVHt9bXtbeXK5bg8LSVrpFhtvVGq9+CN+RzZbKc8gManQfP4M6B5/BnQPP4MaB5/BjSPPwOcx1L5jdh8PkfjEBA8vg+ax68CzePPgObxZ0Dz+DOgefwhcD6EQ0uvoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhoaGhofGd8T8UlHs1bs9urgAAAABJRU5ErkJggg==">
<div>text</div>
</body>
</html>
The image is an inline element, so it's placed on the base line of a text line. The gap is the distance between the base line and the bottom of the text line (I.e. the space needed below the base line for hanging characters like "g" and "j").
Make the image a block element, and the gap goes away:
display: block;
Delete the line break between your image tag and the div tag.
Add display: block to your <img> either in CSS or on the style attribute.
Edit Guffa beat me to the above.
You can also wrap the <img> with a <div> which technically speaking in this case you should do anyways. Only block level elements can be descendants of <body> if I remember the HTML specs right. You then have the flexibility of adding more images inside that div (as long as there is no white-space between the close of the <img> and the </div> you should be good to go.
Remove the newline in the HTML between the <img> line and the <div> line.
Why yes, it is annoying that HTML treats newlines as spaces.
Change:
<img alt="Stack Overflow Logo" src="http://is.gd/lEfE">
<div>text</div>
To:
<img alt="Stack Overflow Logo" src="http://is.gd/lEfE"><div>text</div>
display block didn't work for me but this does. Give it a negative margin value - Valid CSS
img {
width : 250px;
height : 70px;
border : 0;
margin-top : -11px;
margin-left : -22px;
padding : 0;
}
adjust as necessary.
Related
I'm trying to create a div section with an image and text inside it, with scrolling overflow, but when I add the overflow: scroll, an extra line break is added at the top of the text, and I can't figure out how to get rid of it.
I know it isn't the padding or margin that's the problem, because the image is still positioned at the top. The text just has extra space. And removing just the overflow: scroll line gets rid of it, so I can't figure out why it's happening.
<!doctype html>
<html>
<head>
<style>
.scroll {
height: 160px;
overflow: scroll;
}
img.avatar {
height: 50px;
width: 50px;
padding: 0px 6px 1px 0px;
float: left;
}
</style>
</head>
<body>
<div class="scroll">
<img class="avatar" src="(link here)"><p>text here</p>
</div>
</body>
</html>
Any ideas?
It is indeed the margin of the p tag which is the problem here.
You may reproduce the behaviour you mentioned on other ways, e.g., using a border around the .scroll container.
The margin of the p tag is measured against the next element (in a minimal example, to the top of the page). If you set up a border or scrollbars, the margin is instead measured against the container itself, so it moves down.
To prohibit that behaviour, you could, for example, set a margin of 0 to the p tag.
I have the following: jsfiddle.net
What I'm trying to do is have the image float left of the text such that it fills the parent (.box). Note that the .box can vary in height depending on the number of lines of text.
The end result should look like this:
How would this be done?
.box {
position: relative;
display: block;
width: 600px;
padding: 24px;
margin-bottom: 24px;
border: 2px solid red;
}
.img {
float: left;
}
.text {
font-size: 14px;
}
<div class="box">
<div class="img" style="background-image: url('https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg');"></div>
<div class="text">This box is one line.</div>
</div>
<div class="box">
<div class="img" style="background-image: url('https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg');"></div>
<div class="text">This box has two lines. This box has two lines. This box has two lines. This box has two lines. This box has two lines. This box has two lines.</div>
</div>
You can use display: table on the parent element and display: table-cell on the children.
PLUNKER
SNIPPET
<!DOCTYPE html>
<html>
<head>
<style>
html,
body {
height: 100%;
width: 100%;
}
figure {
display: table;
width: 600px;
height: auto;
margin-bottom: 24px;
border: 2px solid red;
}
img {
float: left;
display: table-cell;
min-height: 100%;
margin-right: 20px;
}
figcaption {
font-size: 14px;
height: 100%;
}
</style>
</head>
<body>
<figure>
<img src="http://i.imgur.com/MhHgEb1.png">
<figcaption>This box is one line.</figcaption>
</figure>
<figure>
<img src="http://i.imgur.com/MhHgEb1.png">
<figcaption>This box has two lines. This box has two lines. This box has two lines. This box has two lines. This box has two lines. This box has two lines.</figcaption>
</figure>
</body>
</html>
As far as I know there is no HTML/CSS only solution to make this work - correct me if I'm wrong. The OP wants to have an image with unknown size dynamically scaled to the parent's container's height. This container on the other hand depends dynamically on the text length and has no fixed height. The image size can vary, the text size can vary.
Here a proof of concept solution using jQuery and <img> instead of background-image with the following result:
HTML:
<div class="box">
<img class="img" data-src='https://placehold.it/500x500'>
<div class="text">This box is one line.</div>
</div>
JavaScript / jQuery
var $boxes = $('.box');
var $imgs = $boxes.find('.img');
for (var i = 0; i < $boxes.length; i++) {
var heightParent = $boxes.eq(i).outerHeight() - 4;
// -4 because of border 2px top + 2px bottom
$imgs.eq(i).attr('src', $imgs.eq(i).attr('data-src'));
$imgs.eq(i).height(heightParent);
}
CSS (only changed part):
.img {
float:left;
margin-left: -24px;
margin-top: -24px;
margin-right: 10px;
}
It's not such a trivial thing to achieve what you want as you don't want to set height. Not on the image and not on the parent container.
Problems using background-image:
With the background-image approach it would easy be possible to position the image correctly scaled to the left with position:absolute, but the margin to the right (to the text) would not work, as the width can be different.
Problems using img:
On the other side with the use of <img> you have the problem, that the parent <div> will always be in the original height of the image, as long as no parent has a fixed height - which is the case in your example.
JavaScript for partly making it work:
To avoid this you can avoid the creation of the image on page load by setting the url to a data attribute, I called it data-src. Now when the page is load, you can look for the parent's <div> natural height. Next you pass the URL from the data-src attribute to the src attribute so that the image is rendered.
As we know the former parent's height we can set it as the image height.
The CSS negative margins are there to undo your setting of padding: 24px on the parent's container so that the image is correctly positioned. If you ask yourself why I subtract 4 from the height - this is because you want your image to be within the border, so we need to subtract the 2px to the top + the 2px to the bottom of your border.
Note: Of course this solution would not work responsive without further scripting, but your parent <div> seems not to be responsive anyway.
Fiddle: https://jsfiddle.net/av9pk5kv/
Problems with the layout wish and the above example:
You could argue that the wished layout is not worth aspiring to in the first place, it will not work with more amount of text if you don't change something else. At some point there is so much text, so that it's just impossible to place the image filling the parent:
To avoid it partly you would have to remove the fixed width of the parent.
But the same (or similar) result will happen if the dynamically including of the image via JavaScript leads to more text lines as there were before (the text is squeezed).
How would I solve these problems: I'd use another layout.
I am very new to CSS. I am creating a DIV and somehow the text is being displayed in middle of the DIV. There is a white-space appearing above the first line of the text.
I am also providing the CSS that I wrote for this DIV.
CSS Code
#CONTAINER {
float: left;
height: auto;
padding-top: 0;
border: 1px solid black;
vertical-align: top;
}
#CONTAINER p {
padding: 0;
margin: 0;
vertical-align: top;
}
Here is the Link to the page. Please refer to the last Div which says Latest News
[enter link description here][1]
In your "Latest news block," there is an h2 element outside of the div that your text is in that is pushing everything down.
<div id="block-nodeblock-21" class="block block-nodeblock">
<h2>Latest News Block</h2> <!----this guy-->
<div class="content">
The element is invisible because you set visibility:hidden, however this does not remove it from the page, so it still affects the position of everything around it. To make it truly hidden, you can
Remove it OR
Set display: none;
First off we need your HTML that goes with it, however also remember that the P tag has got its own whitespace added by default, try - values for your padding under
#CONTAINER p
It is possible, that outside the div, you have set the "text-align" property to the value "center". Out of interest, does this occur in any other browsers?
I have a piece of fixed html which is beyond my reach to change and I would like to style it to my liking, but I can't figure out how. This is what I have:
<a title="some title" href="...">
<img src="....jpg"></img>
Some text
</a>
CSS:
div.container-outer {
width: 25%;
float:left;
}
div.container-inner {
width: 156px;
margin: 5px;
}
div.container-inner img {
max-width: 156px;
max-height: 124px;
}
I would like the text centered under the img, and both text and img centered in a fixed width containing div. The width and height of the images are unknown, but there is a max-width and a max-height, and the max-width is smaller than the containing div. Also, the bottom of the picture should be at a fixed position inside the containing div.
I'm free to modify the html around this code snippet.
Is this even possible? I have bashed my head into the wall for the last hour and I'm still clueless....
Best Regards,
Markus
edit 130513 ------------------------------------------------
Added current CSS. This leaves me with the image left-aligned, and the text below also left aligned. If the image changes height then the bottom part of the image moves since it is top aligned.
Have you tried
<div style="text-align:center">
<img src="..." alt="..." /><br />
<span>text<span>
</div>
You can style the div's width in the style param itself. You need to BR after the img because img are inline objects like loose text (text not wrapped inside a P element or something.
The span is only there because you can later style it
So far I haven't managed to do this in CSS... could you use Javascript?
<!DOCTYPE html>
<html>
<head>
<style>
div.container-inner {
width: 156px;
text-align: center;
border: 1px solid red;
}
</style>
<script>
function addBr() {
document.getElementById('container-inner').innerHTML = document.getElementById('container-inner').innerHTML.replace(/(<img.+?>)/, '$1<br>');
}
</script>
</head>
<body onload="addBr();">
<div id="container-inner" class="container-inner">
<a title="some title" href="...">
<img src="images/sample.jpg">
Some text
</a>
</div>
</body>
</html>
Demo: http://doug.exploittheweb.com/SO/16521934.html
FWIW, </img> is not valid HTML and almost certainly won't be present in .innerHTML even if it's there in the source code.
When we use <img> inside <p><img style="float:left">dummy text dummy text dummy text dummy text</p> then how can we have the same margin at right and bottom of the image?
http://jitendravyas.com/image-margin.htm
Use property
vertical-align: bottom;
to image, then the extra space from bottom will be deleted.
Problematic image height
Your image seems to exceed line-height setting by 5px exactly. That's why you're getting this excess space.
You can try negative bottom margin on this image only, but text may come too close to it. The amount of negative margin needed equals excess pixels (in the case of this image it's 5px).
Container DIV
You could however wrap your images in container DIVs that would have an exact line-height multiple height. And also set overflow: hidden; on them as well. But I suggest you set font-size and line-height to points (pt), to control their values.
A solution should be:
<style>
img{
float: left;
margin: 0 20px 20px 0;
background-color: #CCC;
}
p{
clear: left;
margin: 0px;
}
</style>
<p><img height="100" width="100" />dummy text dummy text dummy text dummy text</p>
<p>here some text</p>
You can clear the floating by applying the "clear: left;" to any tag after the "p".
However, I prefer the solution below (it solves the containing issue of the "p" tag, too):
<style>
img{
float: left;
margin: 0 20px 20px 0;
background-color: #CCC;
}
p{
margin: 0px;
}
div.clearer{
clear: left;
}
#container{
width: 300px;
border: 1px solid #CCC;
}
</style>
<div id="container">
<img height="100" width="100" />
<p>dummy text dummy text dummy text dummy text</p>
<div class="clearer"></div>
</div>
<p>here some text</p>
EDIT: My suggestion is the same even in the case of your example (however, in this example you can remove the "clear:left" applied to the "p" tag and you can't use the second method I've suggested)! The behavior of the tags "p" and "img", in the example, it's normal ... I try to explain:
if you set the line-height of the paragraph to 20px (with a font-size < 20px) and the margin (bottom and right) of the img (whose height is a multiple of 20) to 20px, the line at the bottom of the img is forced to split to the right if there aren't at least 40px (20px margin-bottom + 20px line-height) below the img! That it's normal, because there isn't enough space for a line of 20px height!
So, you can choose or to set the margin to a value minor than 20px or to reduce the line-height!
Okay, after having a look to the page, this is not a margin problem, but the fact that your font has not any space to be including at the next line.
Try to change the font size, and you will see that this margin is sometimes reducing, sometimes increasing.
It's because it's certainly an inline content. If you want to keep the content inline but remove the spacing, just add :
line-height: 0;
from: http://bytes.com/topic/html-css/answers/789019-img-bottom-margin-mystery
It's because imgs are display: inline, so they sit on the baseline like text, with a bit of space below them for descenders.
Make the img display: block.
I had this problem too, and I solved it by putting the <img>-tag in a <div>, with the line-height property set to 0.
Here is a jsfiddle.net example.
Notice how there is no space between the image and the <hr> below it.
This does not work if you need to put the image in the middle of a text, because the image will be ot its own line, with the text before it on the previous line, and the text after it on the next line, like here.
Maybe:
<style>
p img {
margin: 0px;
}
</style>