Image not correctly pushing height of parent div [duplicate] - html

This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 8 years ago.
I want a parent div to be the height of the child image, like so:
<div class="container one">
<img src="http://placehold.it/250x250" />
</div>
The div should be exactly 250px tall. For Illustration, I created a JSFiddle here.
Now what is actually happening in FF and Chrome is that the div is just a bit taller, maybe 3 to 5 pixels.
I would like to avoid having to do nesting with unnecessary purely cosmetic markup like
<div class="container one">
<div class="inner">
<img src="http://placehold.it/250x250" />
</div>
</div>
or similar.
I feel like this is horribly obvious but I just can't make any sense of it.

<img> is an inline element and adds that extra space below due to that fact. Fix it with
img {
display: block
}

Related

The margin-top property hits all the divs [duplicate]

This question already has answers here:
Why does this CSS margin-top style not work?
(14 answers)
Closed 4 years ago.
I have three nested DIV elements.
When I insert margin-top into the inside div all others receive the effect.
I need the inside div to have a margin-top relative to the outside div and not the whole block.
I created an example in codepen. I have one div, two div and three div.
Notice that I put the margin-top in div three, but all divs receive the effect.
Does anyone know the reason?
<div class="um">
<div class="dois">
<div class="tres" style="margin-top: 50px;">
conteudo
</div>
</div>
</div>
example codepen
use padding-top instead of margin-top.
<div class="um">
<div class="dois">
<div class="tres" style="padding-top: 50px;">
conteudo
</div>
</div>
</div>
default value tag div is display:block, add css on um class display:flex

Difference between Indented HTML and Inlined HTML [duplicate]

This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 5 years ago.
I am rewritting a client web page and I have some problems with HTML rendering.
Next code is the old HTML and all "a" and "img" tags are in one line like this (INLINE IMG):
<div id="inside-img">
<div class="img" style="width:8643px"><img src=""/><img src=""/>... ...</div>
</div>
When I rewrite this, with better indentation like this (INDENTED IMG):
<div id="inside-img">
<div class="img" style="">
<img src=""/>
<img src=""/>
...
</div>
</div>
The output of HTML breaks as you can see in the image that I have attached.
There are a lot of images and the last image, moves down instead of be at the end of timeline. I do not know why when I indent HTML, HTML style change.
It seems a problem related to elements set to display as inline-blocks, which accounts for whitespace.
While the OP does not provide any CSS associated to the markup, this should work:
<div id="inside-img">
<div class="img" style="font-size:0;">
<img src=""/>
<img src=""/>
...
</div>
</div>
or this (note the extra comments)
<div id="inside-img">
<div class="img" style="">
<img src=""/><!--
--><img src=""/><!--
-->...
</div>
</div>
For a full explanation see https://css-tricks.com/fighting-the-space-between-inline-block-elements/
This happen because of white space between inline items. White space between inline item in HTML gets visible on screen.As image is an inline item then your first code sample is not having any space between HTML tags. while in second sample code their is space between them ( new line) this will appear as a character (i.e. space) in HTML.
Possible solution for this is using Font-size: 0; on the parent div.

Background color being canceled by "float" [duplicate]

This question already has answers here:
Background color doesn't work after float
(3 answers)
Closed 9 years ago.
Explanation of code:
I'm creating a bar with three links. I made the bar, and tried to space out the links using the float, text-align, and width. (I'm trying to get the center link centered and the other two equidistant from it, and equidistant from the sides.) However, when I originally did it with 3 divs (the divs other than the "I" divs), the background color disappeared. So I messed with it and realized the float on the third link's div was causing the problem. So I added another div(the final div), and that worked with a little text. However, since I had to put text in it, it threw off my spacing. So I made a div on the other side(the first one) to balance it out. It still throws off my spacing without float however!
Question(s):
Why does having the floatproperty on the final div in a line cause the background color to disappear?
<div style="padding:0px;margin:0px;background-color:#3C3C3C;">
<div style="color:#3C3C3C;float:left;">
I
</div>
<div style="margin-left:50px;width:20%;float:left;text-align:center;">
<a style="color:#3690B7;" href="">
Hello
</a>
</div>
<div style="width:50%;float:left;text-align:center;">
<a style="color:#3690B7;" href="">
Hello
</a>
</div>
<div style="margin-right:50px;width:20%;float:left;text-align:center;">
<a style="color:#3690B7;" href="">
Hello
</a>
</div>
<div style="color:#3C3C3C;float:right;">
I
</div>
</div>
You have to clear floating by adding for example another div below your final div:
<div style="clear:both;"></div>
Add overflow: auto to your outer <div>:
<div style="padding:0px; margin:0px; background-color:#3C3C3C; overflow: auto;">
The problem is that because you are floating elements within another element that isn't floated causes the wrapping element to be rendered as if it is empty.
To fix this, you can add some widths and a float:left; on the wrapping div
Check out this jsbin example which seems to be what you are looking for.
Basically your first div should be like;
<div style="padding:0px; margin:0px; background-color:#3C3C3C;float: left; width: 100%;">
Then you just need to change the widths, and remove any margins or padding.
p.s. You really should consider moving away from inline styles and use an external stylesheet with Id's and class names.

padding in one div affects other divs [duplicate]

This question already has answers here:
Using display inline-block columns move down
(2 answers)
Closed 9 years ago.
I have three inline-block divs like this:
<div style="display:inline-block">div1</div>
<div style="display:inline-block; padding-top:5px">div2</div>
<div style="display:inline-block">div3</div>
I added a padding to the second div to display it a little lower, but this makes others divs to go down as well. How to make only the second div to display lower?
Here is a JSFiddle: http://jsfiddle.net/mY6hP/
The same thing was asked here, but the accepted answer suggests using absolute positioning, which i would not like to do.
Change the alignment on the other divs so they allign themselves at the top (via vertical-align:top;):
<div style="display:inline-block; vertical-align:top;">div1</div>
<div style="display:inline-block; padding-top:5px">div2</div>
<div style="display:inline-block; vertical-align:top;">div3</div>
Try float:left instead of inline-block display:
<div style="float:left">div1</div>
<div style="float:left; padding-top:5px">div2</div>
<div>div3</div>

wrap text around image using layers [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
CSS: wrap text around a bottom-right div?
Is it possible to have 2 layers, one with text, one an image, and the text wraps around the image?
give to the div2 a float: right
<div id="div1">
<div id="div2">
</div>
</div>
#div2{float:right;}
Need not to add extra div to place image.
HTML
<div><img src="" />
Content here
</div>
CSS
div{width:450px; text-align:justify}
div img{float:right; margin-left:10px}​
DEMO