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
Related
I'm getting some strange whitespace between two divs I have.
Each div has the css property display: inline-block and each have a set height and width.
I cannot find where the whitespace is.
Here is a Fiddle
You get whitespace there because you have whitespace inbetween the divs. Whitespace between inline elements is interpreted as a space.
You have:
<div id="left_side">
<div id="plan">
<h1>div 1</h1>
</div>
</div>
<div id="right_side">
<div id="news">
<h1>div 2</h1>
</div>
</div>
Change for:
<div id="left_side">
<div id="plan">
<h1>div 1</h1>
</div>
</div><div id="right_side">
<div id="news">
<h1>div 2</h1>
</div>
</div>
However, this is a bad way to do what you want to do.
You should float the elements if thats what you want to do.
Use:
float:left;
clear:none;
In both div
If you want to retain your coding layout, avoid floats and keep each div on it's own line entirely...
<div id="leftSide">Some content here</div><!--
--><div id="rightSide">Some more content here</div>
Only add this to your CSS
h1 {
padding:0;
margin:0;
}
Space between div is only due to h1 Margin and Padding
This does the trick:
<div id="left_side">
...
</div><div id="right_side">
...
</div>
Notice how the right-side div starts immediately after the closing tag of the left-side div. This works because any space between the elements, since they are now inline, would become a space in the layout itself. You can mirror this behavior with two span elements.
Demo.
You can also add display: flex; to the divs' parent container (in this case, body). Fiddle.
best way is settings parent element's font-size to 0 then normal font-size to child elements inside that parent (otherwise inherits zero from parent)
Floated both of the elements left, also made the 30% width into 40% to fill all the space, but this isn't necessary. Please be aware, "inline-block" isn't supported by IE7 but can be fixed with a workaround.
http://jsfiddle.net/RVAQp/3/
Move these statements onto the same line:
</div><div id="right_side">
Tried using float instead of "inline-block", no problems. Just changed the display:inline-block to:
#left_side {float: left;}
and
#right_side {float: right; margin-right: 10%}
No apparent problems. Could be wrong.
Don't know why but I resolved this problem by adding border: 1px solid red;(vertical) and float: left;(horizontal) to related DIV style statement and white-spaces removed.
Parent div set to font-size: 0px and chiilds to wanted size like 17px :)
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 a web page that has five buttons of width 50 arranged next to each other in a row, and above each one, I want there to be a text item. However, putting each one in a <span> or a <div style="display:inline"> does not pad them correctly with either "width="50"" or adding "width:50px" to the style; they just appear next to each other. The "obvious" answer is to put each item into a table cell, but W3C says this is a Bad Thing now.
I also tried using input tags with readonly set; these space properly, but the text appears in input boxes rather than "on the page background."
Is there a way to align label elements (that can be changed in the script) evenly spaced horizontally without using a table?
There are a few possible solutions. Either you can use display: table-cell, which perfectly follows the W3C recommendations or you can use a flex box which is an even better solution. However the flex box is still quite new and you may want to support an older browser so the display: table-cell approach might work at least as a fallback.
Please, see the working fiddle.
HTML
<div class="container">
<div class="row">
<span>Text 1</span>
<span>Text 2</span>
<span>Text 3</span>
<span>Text 4</span>
</div>
</div>
CSS
.container {
display: table;
width: 100%;
}
.row {
display: table-row
}
span {
display: table-cell;
text-align: center;
}
Inline elements can't have fixed width or height. Try adding display: inline-block;.
Elements of display: inline don't take a width property, their size is dictated by their contents; to allow for elements to appear in-line with their siblings and to also accept a width switch their display property to that of inline-block.
It's because inline elements does not have fixed width. They are automatically set to fit in the space. You need to set display: inline-block to set width of an inline element.
Try this:
<style>
.btnbtnSpace{
width:50px;
display: inline-block;
}
</style>
<div class="btnbtnSpace">Text<br /><button > 1</button></div>
<div class="btnbtnSpace">Text<br /><button > 2</button></div>
<div class="btnbtnSpace">Text<br /><button > 2</button></div>
<div class="btnbtnSpace">Text<br /><button > 4</button></div>
<div class="btnbtnSpace">Text<br /><button > 5</button></div>
"display: inline-block" worked. I didn't notice it at first because the options on the "CSS Display" page at W3Schools didn't include it; inline-block gets its own page for some reason.
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.
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.