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>
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 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 am a relative novice in the world of CSS so please excuse my ignorance! I am attempting to use the following CSS to align two divs horizontally:
.portrait {
position: relative;
display:inline-block;
width: 150px;
height: 200px;
padding: 20px 5px 20px 5px;
}
.portraitDetails {
position: relative;
display:inline-block;
width: 830px;
height: 200px;
padding: 20px 5px 20px 5px;
}
Unfortunately, unless I remove the display: inline-block from the .portrait class and replace it with float:left the .portraitDetails div block appears underneath the first div block. What on earth is going on?
Since you provided a working example, the problem seems to be more clear now.
What you have to do is simply remove display: inline-block and width: 830px properties from the right div. Of course remember to NOT add the float property to it.
People sometimes forget what is the purpose of the float property. In your case it is the image which should have float property and the image only. The right div will remain 100% wide by default while the image will float it from the left.
HINT: If the text from the div is long enough to float underneath the image and you want to keep it "indented" at the same point then add the margin to the div with a value equal to the image's width.
The problem with display: inline-block; is that the siblings having this property are always separated by a single white-space but only if there are any white-spaces between their opening and closing tags.
If the parent container has fixed width equal to the sum of the widths of these two divs, then they won't fit because this tiny white-space pushes the second div to the next line. You have to remove the white-space between the tags.
So, instead of that:
<div class="portrait">
...
</div>
<div class="portraitDetails">
...
</div>
you have to do that:
<div class="portrait">
...
</div><div class="portraitDetails"> <!-- NO SPACE between those two -->
...
</div>
I have been trying to do the following. I have a <div> element
which spans the whole width of its parent div. Inside of this
I would like to place A. some text and B. an image.
A. some text (either loose text or text enclosed in a <p>, <h2>,
or <span>, or <div> element), on the left.
B. an image defined via an <img> element whose both height and width
are known.
Other requirements:
There must be 12px of space between the text and the <img> element.
Important: both the text from A. and the image from B. must be
centered as a group.
The text from A. must be vertically centered in its enclosing space.
How can I achieve this effect? I have tried different things but cannot
manage to place the image to the right of the text and cannot manage to
have the text A. vertically centered.
Anyone know how to solve this simple problem?
Thank you all for your answers, seems CSS makes simple things so hard,
anyways:
div#content_whatsnew, div#content_bestsellers { clear: both; height: 108px; font-size: xx-large; text-transform: uppercase; margin-left: 380px; }
div#content_whatsnew p, div#content_bestsellers p { float: left; height: 108px; line-height: 108px; padding: 8px 12px 0px 0px; color: black; }
div#content_whatsnew img, div#content_bestsellers img { float: left; height: 108px; }
Is this what you are trying to achieve? http://dabblet.com/gist/3130292
Is this about right?
http://jsfiddle.net/89twb/2/
For aligning text, check this out.
And for placing elements next to each other, this.
This should work:
<div class="my-outer-container">
<div class="my-inner-container">
<div class="my-text">Here is my text, it is lovely text.</div>
<img src="my-image.jpg" alt="" class="my-image" />
</div>
</div>
.my-outer-container {
width:auto;
text-align:center;
}
.my-inner-container {
width:XXXpx; /* enter whatever the width you want here is */
margin:0 auto;
overflow:auto;
}
.my-text {
width:XXXpx; /* enter whatever the width you want here is */
float:left;
margin-right:12px;
}
.my-image {
width:XXXpx; /* enter whatever the width you want here is */
height:XXXpx; /* enter whatever the height you want here is */
float:left;
}
Then maybe use the vertical centering tip on the link provided above by #biziclop
The most intuitive way would be using 'vertical-align:middle;' but it often tends not the way you want it to work.
I did some research and found this code from here. http://phrogz.net/css/vertical-align/index.html
Hope this helps!
<style type="text/css">
#myoutercontainer { position:relative }
#myinnercontainer { position:absolute; top:50%; height:10em; margin-top:-5em }
</style>
<div id="myoutercontainer">
<div id="myinnercontainer">
<p>Hey look! I'm vertically centered!</p>
<p>How sweet is this?!</p>
</div>
</div>
In order to center a div, it has to have a fixed width. If it spans the width of its parent div, you can only then center things inside it. So it sounds to me like the best solution would be to place your text in a fixed-width left-floated div, and do the same for your image, and then place those both in a fixed-width holder div, which is centered with margin:auto;
Here's an example: http://dabblet.com/gist/3130148
Edit- I vertically centered the text by placing it in a table. Tables are the only surefire way to vertically center something cross-browser.
<h2><img src="img.jpg" height="75px"> some text</h2>
I would like to position my image right next to a block of text but have it padded down slightly, how can I achieve this? I have tried style: padding 10px; without success inside the image tag.
I think you are looking for something like this. http://jsfiddle.net/3HZr7/
<h2>
<img src="img.jpg" height="75px">
<span>some text</span>
</h2>
h2{
overflow: auto;
}
h2 span{
float: left;
margin-top: 10px;
margin-left: 10px;
}
h2 img{
float: left;
}
You misunderstand the CSS box model.
Padding is for the space inside of the box, margin on the other hand, is responsible for the space outside the box, the space the box has from its container.
So your possible solutions are simple:
Apply padding on the parent element.
Apply margin on the image element.
Example.