Are these two attribute does the same or is it got different usages?
vertical-align:top and vertical-align:text-top
The difference can be explained through line-height property.
MDN Source
text-top
Aligns the top of the element with the top of the parent element's font.
top
Align the top of the element and its descendants with the top of the entire line.
.top {
line-height: 5em;
}
.text-top {
line-height: 5em;
}
.top span {
vertical-align: top;
}
.text-top span {
vertical-align: text-top;
}
<div class="top">I am vertical-align: <span>top</span>
</div>
<div class="text-top">I am vertical-align: <span>text-top</span>
</div>
Notice in the above example, the text-top is below the text when it is to be placed above it.
It is because we have set line-height: 5em. em is relative to the font-size. And as per the definition the text-top will be aligned to the parent element(.text-top)'s baseline.
vertical-align:top :- This will align the top of element with the top of tallest element.
vertical-align:text-top :- This will align the top of element the top of the parent element's font
Most of the scenarios is almost same , as you have same font and text in line. It will have different impact when your line has some other elements like image along with text, this scenario text-top will align your element with tallest text even if image is taller than text but top will align it with top of image or who ever is tallest in line whether text or image.
Although, there is a very slight difference between these but both these attributes of the "vertical-align" property may come very handy while some text formatting. You may understand it this way that : vertical-align property is self descriptive that is helps in aligning elements vertically with respect to the line box height. Now vertical-align:top , aligns the element’s top edge to the line box’s top edge.
And whereas, the vertical-align:text-top aligns the element’s top edge to the line box’s text box top edge.
Related
I'm trying to understand why the line-height CSS property places the text vertically in the middle of this button:
.btn-order {
width: 220px;
height: 58px;
font-size: 24px;
padding: 0;
text-align: center;
vertical-align: middle;
line-height: 58px;
border: 1px solid black;
}
<div class="btn-order">Complete Order</div>
The line-height property is essentially setting a 29px (29 + 29 = 58) text line above and below your text, "Complete Order". If you added another line of text below this you will find it 58px below this text. You are putting line-height here only to center your text in the middle.
Here is a good slide show to help you understand this concept more... line-height
And here is an example using your code of what I am talking about: http://jsfiddle.net/YawDF/14/
By setting the line-height to 58px you are telling the browser to leave half this above and below the text line, creating a '58px' gap between each line and only a '29px' gap above the first line.
SIDE NOTE: Your use of vertical-align: middle is useless in the code you are showing. This can be taken out all together.
it is by design. If the CSS parser (i.e. the browser) doesn't know how tall is your text, he can't vertical align your text correctly.
Note there is a default value of line-height property.
line-height defines the height of text which make the paragraph looks neat so vertical-align works with respect to line-height when you increase the line height it increases the height and the you can more clearly see the effects of vertical-alignment of text
think this as a notebook which we children use to learn English -writing in nursery class
The text you generate is inside its own line box and vertical-align is used for placement inside that box. However, that box has nothing to do with the div you have wrapped around the text. You set the height of the div to 58px but that does not affect the height of the line text box. That is why you need line-height to match the height of the div.
Whenever a paragraph is inserted in a division the distance between the first line and the top border of the div is half of the line-height i.e if the default line- height is 1px then the distance between the first line and the top-border of the div is 0.5px.
If you have a division with height:58px the distance between the line and the top-border of the div is 29px and the distance between the line and the border of the bottom div would be=(total div height-distance b/w the line and the top border) which is 58px-29px=29px.This results in the line being vertically aligned at the center.
Also,there is no need to use vertical align:middle(for text containing not more than one line) if you're using line-height to centrally align the text.
So I have this plunker:
http://plnkr.co/edit/g5AZfKGeDVNAICPPt4WR
It has 2 divs both with a svg element in them and the only difference is that the bottom svg element has a vertical-align: middle and the top one does not.
My question is why when I add a vertical-align: middle to the svg element does the parent's height change from 20px to 18px? I mean the svg element's height remains at 16px regardless of the vertical-align property.
inline-block elements are standing on baseline if you do not reset vertical-align.
This means that you have underneath a little gap, about 0.2em, wich is room used by letters such as : jpq...
Once you reset vertical-align to middle, top, bottom, ... , this gap fades away when not needed anymore.
See W3C as reference : http://www.w3.org/wiki/CSS/Properties/vertical-align / http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align and within table-cell (td or displayed as such) <table> context : http://www.w3.org/TR/CSS2/tables.html#height-layout :)
Consider the following HTML:
.top {
min-height: 150px;
}
p {
margin: 50px;
}
div {
background-color: #eee;
}
<div class="top">
<p>Welcome</p>
</div>
<div class="content">Main content</div>
You can see it in action here:
http://jsfiddle.net/Lp4tp/1
Question
In Chrome(for Ubuntu), it appears that the margin defined on the p tag causes spacing between the top div and it's surrounding elements, instead of expanding the top div and producing the equivalent of adding 50 pixels padding on the top div.
Is this correct behavior? And if so, how can I ensure that child elements inside the top div cannot create undesired space between the top div and the content div.
Note
If I use a fixed height instead of a minimum height, the spacing between the top and the content div vanishes, but the top still produces 50 pixels of white space above itself.
Your margins collapse. Fix with overflow:auto on the div:
div {
background-color: #eee;
overflow:auto;
}
jsFiddle example
Top and bottom margins of blocks are sometimes combined (collapsed)
into a single margin whose size is the largest of the margins combined
into it, a behavior known as margin collapsing.
You could also add a border to the div for the same result.
add to p
display:inline-block;
I have two div id's. One has has an image in it and the other has a background image. There is an unwanted space in between these two divs. In the dreamweaver design view it appears as if there is no space, but if I make it live or preview in browser the space appears again.
This is the css for the divs
#header {
text-align: center;
padding: 0px;
margin: 0px;
}
#content {
background-image:url(img/ContentBox.png);
background-repeat: no-repeat;
background-position:center;
padding: 0;
margin: 0;
}
This is my body html (ignore the multiple line breaks, this is just so I can see the bg img in the div)
<body>
<div id="header"><img src="img/Header.jpg" /></div>
<div id="content"><br><br><br><br><br><br><br></div>
</body>
Images have a default display setting of inline. This causes them to flow inline with text, vertically-aligned with the baseline. All text is vertically-aligned with the baseline by default as well, unless you change it by setting vertical-align to something else on its containing element.
What is baseline?
The baseline floats above the bottom of the actual line. Look at the lower-case letter g. The bottom of the top circle is the baseline. That's where the images are getting aligned.
You can solve this multiple ways, but here are a couple:
Vertical Alignment
Again, image elements are set to display: inline by default. Assuming you don't want to change this, you need to adjust how the image element aligns vertically on the current line of text.
The vertical-align CSS property sets the vertical alignment of an inline element on the current line of text. It doesn't set it relative to the container.
Therefore, you can set the vertical-align property to middle, top, or bottom, and as long as the image element is larger than the line-height of the current line of text, it will not have the extra space below it.
However, you need to remember what I just said about line-height. In the event that your line-height is larger than your image element, vertical-align will do more than remove that extra spacing: it will actually align the image element on the line accordingly. See this jsFiddle to see an example of how a line-height greater than the height of the image will affect the result.
So, keeping with the HTML that you provided, to set the vertical alignment, you'd do the following CSS rule:
#header img {
vertical-align: bottom; /* or top or middle */
}
Displaying as Block Level
Another option would be to change the image element to display as a block level element. I don't recommend this approach unless you know you want a block level image.
Block level elements automatically fill to their container, and don't flow inline with text or other inline elements. Also, if you set a float on the image, this would force it to be block level.
So, you have two options to display as block level:
#header img {
display: block;
}
or
#header img {
float: left; /* You could float right too */
}
I have a slider, with a div that contains the controls previous, start/stop sliding, next.
I set "text-align" to left, center and right, respectively, and display to "inline". I have no idea, now, how to fill the whole width.
Here is the markup:
<div id="external_promo_controls">
<div id="promo_previous"></div>
<div id="promo_auto_controls"></div>
<div id="promo_next"></div>
</div>
And the CSS:
#external_promo_controls div{
display: inline;
}
#promo_previous {text-align: left;}
#promo_auto_controls {text-align: center;}
#promo_next {text-align: right;}
I guess I could have it done with floating elements, however I got quite a mess trying to have a correct combination of elements being on one line and centering the element in the middle. I’d like to avoid positioning elements with pixel value, since it would break as soon as I change text, font, or size or the container, which are all events that will eventually occur.
simple to use floats - this fiddle should set you on the right path:
http://jsfiddle.net/Q4paq/
New example with DIVs containg a link with a hover state.
http://jsfiddle.net/Q4paq/1/
try this. I am not sure it will work or not but suppose all three inner divs has width of 100px each then
outerDiv specify the width to be 300px with no margin and padding
innerDiv width:100px and margin and padding are 0px and float : left.
if you want to specify margin and padding then summation of all three innerDiv's width + padding + margin + border * 3 should be the width of the outer div.