I have the following:
<div>
<div style="display:inline-block; ">div_1</div>
<div style="display:inline-block; line-height:20px;">div_2</div>
</div>
Why does having a line-height property set for the second div also effects the first div? And how to correct for this i only need the second div to be effected by line-height because I need to specify a different line-height for the first div. Thanks in advance.
document.getElementById('go').onclick = function(e) {
document.getElementById('div_2').style.lineHeight = '30px';
};
<button id="go">Go</button>
<div>
<div style="display:inline-block;" id="div_1">div_1</div>
<div style="display:inline-block; line-height:24px;" id="div_2">div_2</div>
</div>
With the test case, it's now crystal clear.
Add vertical-align: top to the first div:
<div style="display:inline-block; line-height:24px; vertical-align: top" id="div_1">div_1</div>
Fixed version: http://jsfiddle.net/my6Su/5/
Read this to understand the relationship between display: inline-block and vertical-align:
http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
Also useful, for a visual demonstration:
http://www.brunildo.org/test/inline-block.html
Firstly, the effect of line-height is only on inline elements. When line-height is applied to block, inline-block or any other type of element that is not inline, the effects are on the inline descendant elements only.
Secondly, in a line-box (an abstract box enclosing inline elements in a line), all the inline elements are aligned along the baseline. When you change the line-height for the second div, it adds half-leading at the top (and bottom) of that inline-element. And top half-leading pushes the baseline lower, which in turn moves the first div lower.
I am not exactly sure what you are trying to achieve, but, I would recommend either using the vertical-align property or just use position relative.
<div>
<div style="display:inline-block; line-height:10px;">div_1</div>
<div style="display:inline-block; line-height:20px;">div_2</div>
</div>
try this. this will work.
Related
I have a div with font size of 88 and line height of 88. The text inside the div has a height taller than 88. Why is this?
<div style="font-size:88px;line-height:88px;">I need <span sytle="color:red;">videos</span></div>
If you open up the element inspector and highlight the parent div, it is 88px tall. However if you highlight the text "I need" and the nested span, the height is 101px. This remains true even if you set the line-height on the span itself:
<div style="font-size:88px;line-height:88px;">
I need <span style="font-size:88px;line-height:88px;color:red;">videos</span>
</div>
See attached repl: https://repl.it/#teeej/ReliablePunctualRam
<span> is, by default, an inline element.
If you expect it to behave like an inline block element, you have to give it a display value of inline-block and it will have a height of exactly 88px:
div > span {
display: inline-block;
background-color: rgba(255,0,0,.1);
}
<div style="font-size:88px;line-height:88px;">
I need <span style="font-size:88px;line-height:88px;">videos</span>
</div>
For a better understanding of the implications of display property, I recommend the Candidate Recommendation. And here's the current (official) Recommendation.
I have stuffed two elements on a single line: an inline element followed by an inline-block element. Despite having exactly the same vertical-align: baseline, they do not appear to line up properly on the line. They are offset by one pixel on my test browser
A reduced testcase:
<div>
<span style="background-color: #f00;"> </span>
<div style="background-color: #f00; display: inline-block; height: 1em"> </div>
</div>
https://jsfiddle.net/vupn9yk6/
Any idea on how to make both elements perfectly aligned vertically ?
Span is not a block level element. you have to update your css like this.
HTML
<div class="someclass">
<span style="background-color: #f00;"> </span>
<div style="background-color: #000;"> </div>
</div>
CSS
.someclass span, .someclass div{display:inline-block}
Check this fiddle. Hope this help you.
inline
inline element is not taking height and width, it's height and with property auto,
inline-block
inline-block element is taking height and width, if you not define in your css, when you will change the property in (inline-block) then it's came same base line
Please check below image
On setting the inner div to inline-block, it renders slight below that of a block. Why is that ?
http://jsfiddle.net/Sb9Wb/
<div class="outer">
<div class="inner">
<p> This is a inner div</p>
<p>Height set to 100%</p>
<p>Why it renderes slightly below when set to inline-block that of a block?</p>
</div>
Please try setting the inner div as block and see the difference!
And the same inline-block adds a scrollbar here http://jsbin.com/kabom/1/edit
Just because, a class below is added to a div!
.sapUiView {
display: inline-block;
}
That space you are actually seeing is caused by the "p" margin that becomes visible when you add the inline-block property.
Try adding
margin:0;
to the first child of p like so:
http://jsfiddle.net/Sb9Wb/2/
I have the following:
<div>
<div style="display:inline-block; ">div_1</div>
<div style="display:inline-block; line-height:20px;">div_2</div>
</div>
Why does having a line-height property set for the second div also effects the first div? And how to correct for this i only need the second div to be effected by line-height because I need to specify a different line-height for the first div. Thanks in advance.
document.getElementById('go').onclick = function(e) {
document.getElementById('div_2').style.lineHeight = '30px';
};
<button id="go">Go</button>
<div>
<div style="display:inline-block;" id="div_1">div_1</div>
<div style="display:inline-block; line-height:24px;" id="div_2">div_2</div>
</div>
With the test case, it's now crystal clear.
Add vertical-align: top to the first div:
<div style="display:inline-block; line-height:24px; vertical-align: top" id="div_1">div_1</div>
Fixed version: http://jsfiddle.net/my6Su/5/
Read this to understand the relationship between display: inline-block and vertical-align:
http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
Also useful, for a visual demonstration:
http://www.brunildo.org/test/inline-block.html
Firstly, the effect of line-height is only on inline elements. When line-height is applied to block, inline-block or any other type of element that is not inline, the effects are on the inline descendant elements only.
Secondly, in a line-box (an abstract box enclosing inline elements in a line), all the inline elements are aligned along the baseline. When you change the line-height for the second div, it adds half-leading at the top (and bottom) of that inline-element. And top half-leading pushes the baseline lower, which in turn moves the first div lower.
I am not exactly sure what you are trying to achieve, but, I would recommend either using the vertical-align property or just use position relative.
<div>
<div style="display:inline-block; line-height:10px;">div_1</div>
<div style="display:inline-block; line-height:20px;">div_2</div>
</div>
try this. this will work.
<div style="background-color:black" onmouseover="this.bgColor='white'">
<div style="float:left">hello</div>
<div style="float:right">world</div>
</div>
Why does the background color not show as black? I cannot set the width and float, is it possible without them?
Since the outer div only contains floated divs, it renders with 0 height. Either give it a height or set its overflow to hidden.
Change it to:
<div style="background-color:black; overflow:hidden;" onmouseover="this.bgColor='white'">
<div style="float:left">hello</div>
<div style="float:right">world</div>
</div>
Basically the outer div only contains floats. Floats are removed from the normal flow. As such the outer div really contains nothing and thus has no height. It really is black but you just can't see it.
The overflow:hidden property basically makes the outer div enclose the floats. The other way to do this is:
<div style="background-color:black" onmouseover="this.bgColor='white'">
<div style="float:left">hello</div>
<div style="float:right">world</div>
<div style="clear:both></div>
</div>
Oh and just for completeness, you should really prefer classes to direct CSS styles.
Floats don't have a height so the containing div has a height of zero.
<div style="background-color:black; overflow:hidden;zoom:1" onmouseover="this.bgColor='white'">
<div style="float:left">hello</div>
<div style="float:right">world</div>
</div>
overflow:hidden clears the float for most browsers.
zoom:1 clears the float for IE.
This being a very old question but worth adding that I have just had a similar issue where a background colour on a footer element in my case didn't show. I added a position: relative which worked.