a:link,
a:visited {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover,
a:active {
background-color: red;
}
This is a link
In the above code if I set "display" to "inline" the link gets pushed towards upside. Why is it so?
First of all, your question is not a duplicate of Why is this inline-block element pushed downward? and the answer here (unlike that question) has nothing to do with vertical alignment. Nor will studying "Section 8 Box Model" of the CSS 2.2 spec enlighten you.
To understand what's happening here you need to understand about heights. The height of block containers and the height of line boxes, and how they interact.
Block containers, which includes among others display:block and display:inline-block elements have a height that's either the sum of the height of its block level box children, if it has any, or the sum of the line-heights of its stack of line boxes otherwise.
In the case of your example, the <body> element, which is a display:block block container has only inline-level children, regardless of whether the <a> element is display:inline or display:inline-block so its height is the height of the sum of the line boxes. Furthermore, unless the viewport is very narrow, we can simplify things further by assuming that all the text in the <a> element will fit on one line, and so the height of the <body> element is the height of the one and only line box that it contains. We have this:
You'll note that I haven't depicted the boundaries of the <a> element above. That's because its placement depends on whether it is display:inline or display:inline-block.
We now need to look at how line-heights are calculated from the content. For display:inline elements we have this in the section 10.6.1 Inline, non-replaced elements of the spec.
The height of the content area should be based on the font, but this
specification does not specify how. A UA may, e.g., use the em-box or
the maximum ascender and descender of the font.
and
The vertical padding, border and margin of an inline, non-replaced box
start at the top and bottom of the content area, and has nothing to do
with the 'line-height'. But only the 'line-height' is used when
calculating the height of the line box.
Put those together, and what it means is that the height of the line box in this circumstance is the height of the text, and that the padding you have: padding: 14px 25px; doesn't affect the height of the line box at all, when the <a> element is display:inline. If it doesn't affect the height of the line box, then it doesn't affect the height of the <body> element either. But the background of the text and its padding still get painted. So we have this:
display:inline-block is different. Here the 10.6.6 Complicated cases spec says:
For 'inline-block' elements, the margin box is used when calculating
the height of the line box.
So the line box contains the whole of the inline-block element, not just the content, but the padding, borders and margins as well. In this case we have
And we can see if we put them alongside one another, that the text is lower for display:inline-block, than for display:inline.
Block-level elements are vertically aligned depending on the upper side of the box.
Inline-level elements are vertically aligned in respect to the text baseline. That is why for block-level elements your top padding is taken into account, but not for inline-level elements.
I would recommend reading about the box model in the spec.
a:link,
a:visited {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover,
a:active {
background-color: red;
}
This is a link
In a nutshell:
An inline element has no line break before or after it, and it tolerates HTML elements next to it.
A block element has some whitespace above and below it and does not tolerate any HTML elements next to it.
An inline-block element is placed as an inline element (on the same line as adjacent content), but it behaves as a block element.
Please go through this article for more insights.
You should preferably use display: inline-block in this case.
a:link,
a:visited {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover,
a:active {
background-color: red;
}
This is a link
Related
Its like few days pass and again when I try to recall what I read about line-height is something misleading what I am seeing
<span>Color me</span>
span {
line-height: 52px;
background: red;
font-size: 14px;
}
Why it does not color complete box (i.e complete line-height)?
But When I do the same with div it colors as required.
<div>Color me</div>
div {
line-height: 52px;
background: red;
font-size: 14px;
}
In this particular case you need to add the following:
span {
display: inline-block;
/* ... */
}
As for the reason why, see this StackOverflow answer.
Since span is an inline element it occupies only the height of the text and it does not cover the full area whereas in div it is a block element so it can cover the full area.
The method to convert the inline element to block element is
span{display: inline-block;}
Because line-height doesn't work on inline element. span is an inline element. You may add display: block or inline block to span's css
On replaced inline elements such as buttons or other input element, line-height has no effect.
For more information, see line-height#Mozilla
The difference between span and div is that a span element is in-line and usually used for a small chunk of HTML inside a line (such as inside a paragraph) whereas a div (division) element is block-line (which is basically equivalent to having a line-break before and after it) and used to group larger chunks of code.
The actual answer to this problem while keeping span elements as inline is to use the padding attribute.
https://stackoverflow.com/a/56781081/1011956
I have two spans inside each other. On the inner span I have overflow-x:hidden. This causes extra space below the inner span. Why?
<span style="" class="yavbc-color-tip"><span style="">Some text</span></span>
Fiddle: http://jsfiddle.net/U92ue/
Note: I have only tested in latest Chrome.
Visual formatting model - 9.4.1 Block formatting contexts
Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.
More specifically, a new block formatting context is established when the overflow property is changed. By default, an element's vertical-align property value is baseline. You can simply change this to something like top in order to fix this.
Updated Example
span.yavbc-color-tip span {
display: inline-block;
padding: 3px;
border-radius: 8px;
border: none;
background-color:#005e8e;
color:#7cd3ff;
overflow-x: hidden; /* This gives extra space under this span. Why? */
vertical-align:top;
}
Notice this doesn't happen when the element's display isn't changed to inline-block? It doesn't occur with inline elements - example demonstrating this.
Despite the above quote in the accepted answer, this behavior has nothing to do with Block Formatting Context and with "block" part of the inline-block value at all. It's all about the "inline" part of it.
All inline-* elements participate in the Inline Formatting Context. That means, they are placed inside the so called "line boxes" along with text and other inline-level elements. These elements and text are aligned with each other, so the height of each line box is calculated from the top of the highest element to the bottom of the lowest one.
By default, inline-level elements are aligned with the baseline of their fonts (see first line in the example below). Even if parent element has no actual text, the position of the baseline and the minimal height of the line box are calculated as if it had text (the spec calls this "imaginary" text the "strut" of the element). That's why the line box always has some space above the baseline (for the font ascenders and diacritics) and below it (for the font descenders) — see the second line of the example.
The tricky part for the inline-block elements is that overflow property changes what is considered the baseline for these elements (end of section 10.8.1 of the spec):
The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.
So, while technically the space below the baseline is always reserved, with default overflow: visible, the inline-block element is placed so that its text's baseline is aligned with the parent baseline, and its bottom part is moved below it. In many cases this makes this inline-block the lowest element in the line, so the space reserved for font descenders is not visible. However, changing the overflow value makes the whole element render above the baseline (like an <img> element), making all this space visible.
p {
margin: .5em;
font: 32px/1.5 serif;
color: #fff;
background: #888;
}
span {
display: inline-block;
font: 12px/1 sans-serif;
background: #fff;
color: #000;
padding: 2px;
border: 1px solid green;
}
.ovh {
overflow: hidden;
border-color: red;
}
<p>Text with image <img src="http://via.placeholder.com/30x15"> and <span>two</span> <span>inline-block</span>s</p>
<p><img src="http://via.placeholder.com/30x15"> <span>only</span> <span>inline-blocks</span></p>
<p><img src="http://via.placeholder.com/30x15"> <span>regular</span>, the <span class="ovh">overflowed</span> trick</p>
In general, inline formatting is tricky. You can find a good explanation of some of its gotchas and surprises in this article: http://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align.
I'd say that a good rule of thumb would be not using display: inline-* for its side effects, if you aren't really going to place the element inside the text. In the OPs example, the best solution would be to use display: block for the inner span, that doesn't involve any "magic" like line box calculation.
I have a simple HTML vertical menu, with such a structure:
<div id="menu">
<div class="item">
...
</div>
</div>
I've set the .item div to be rendered as text elements, so they're ordered next to each other:
#menu div.item {
margin: 0px;
padding: 0px;
display: inline;
}
This kinda works:
However, I want to apply a :hover effect on each link, such as vertical black borders will come from sides and connect with the bottom dashed border:
So I did the following:
#menu div.item a{
padding: 5px;
border-width: 0px 1px 0px 1px;
border-color: transparent;
border-style: dashed;
}
#menu div.item a:hover{
border-color: black;
background: #B3D2FF;
}
But the link seems to be bigger than it's parent element. I didn't think this was possible:
What's wrong? Why doesn't the parent DIV stretch to be able to contain whatever's inside?
(not) Working fiddle.
Rest of the CSS:
#menu {
text-align: center;
margin: 0px;
padding:0px;
background-color: #CEE2FF;
border-bottom: 1px dashed #1868FF;
}
Add the following css:
#menu div.item a {
display: inline-block;
}
Before this code, the a tags are not being displayed as blocks and the container doesn't want to be friends with them.
The padding 5px you used on the a tag will be partially applied but only left-right in respect to other sibling inline elements.
You're trying to set padding to inline elements, which is visually not the desired. The padding on inline elements will refer to the textual line, but not in respect to the containing block-level parent.
Remember that padding can be set to block-level elements such as
<div>, <h1>, <p> etc...
One fix is to use some simple math and set line-height to your a
The other is to set your inline anchors as display-block elements,
doing that way your elements will act contextually as inline elements while being allowed to take block-level elements properties.
https://developer.mozilla.org/en-US/docs/Web/CSS/display
http://www.w3.org/TR/CSS2/propidx.html
Also setting just like that an inline any element to be inline-block is not the best choice and is not fully compatible with older browsers.
display-inline for span, a, b, i, s, q, u will work in all browsers,
but generally speaking span is the perfect one to be used in that case cause even if an inline element by properties is similar to div.
https://developer.mozilla.org/en-US/docs/HTML/Block-level_elements
https://developer.mozilla.org/en-US/docs/HTML/Inline_elements
From CSS 2.1 section 10.6.1 Inline, non-replaced elements
The vertical padding, border and margin of an inline, non-replaced box
start at the top and bottom of the content area, and has nothing to do
with the 'line-height'. But only the 'line-height' is used when
calculating the height of the line box.
The height of the block div is the height of the stack of line boxes, which in this case is the height of the one and only line box. Which means that if you want to contain the <a> with padding, you need to set the line-height of the <a> element.
Add to your CSS
#menu div.item a{
line-height:30px;
vertical-align:top;
}
Like this: http://jsfiddle.net/Z63gs/4/
You can try putting overflow:hidden; on your #menu item. http://jsfiddle.net/Z63gs/1/
This will just hide the extra fluff. I think your padding is making the <a> elements larger than you would like.
Elliot's answer is much cleaner than this.
This is the HTML:
<div>
<p>
We bring you the latest in entertainment & information services, right on your phone. From the latest of Bollywood to the futuristic applications, get it all here!
View All
</p>
</div>
And this is the CSS....
div{width: 350px;}
a{
padding: 30px;
background: red;
margin: 20px;
border-radius: 12px;
background: red;
color: #fff;
font: bold 12px Arial, Helvetica, sans-serif;
text-decoration: none;
}
I know this could be solved by using display: inline-block; in .a. But I would like to know why this is overlapping the text? Should it not to go beyond the text?
DEMO1
DEMO2 now a is within a block level of p.
And also have a look at this DEMO. Img is also an inline element. And why this is not overlapping, this should also be overlapping, right?
<a> tag is inline level but while <img> tag is both inline and block level specially inline-block. So <a> tag is overlapping because of inline level which is corresponding to the text but <img> tag won't overlap because it is behaving inline-block. And you may know the difference between them.
Reference: Is <img> element block level or inline level?
An inline element could not be set its width and height and even doesn't work correctly the margin behaviour what actually should do. The margin is applied only to left or right side. Actually this is why, inline element here <a> tag would not set its width and height and remain in same line and seems to be overlapped when applied padding values.
The following picture makes you clear to understand about inline vs inline-block
View Live Demo
It's overlapping because the default behavior for an <a> tag is to fit with the text. If you want it to behave like a block, then set display: block.
The initial value for the display property on a link is display: inline. This means that it will try to fit in with the text and will accept horizontal margins, and padding on all sides, which is exactly why your link overlaps the text. In order for it to accept vertical margins (so it doesn't overlap), you need to set it to display:block or inline-block if you want it to align with the text still.
Padding doesn't work well with inline elements.
Ref:Inline Elements and Padding
This actually is explained in the W3C spec, although it was a bit tricky to find.
Horizontal margins, borders, and padding are respected between these boxes.
This tacitly implies that vertical margins/borders/padding are not respected. It goes on to say:
The height of a line box is determined by the rules given in the section on line height calculations
If you move the <a> into the contents of the box
We bring you the latest in entertainment View All
You can see this effect: http://jsfiddle.net/rHCNb/7/ -- the horizontal padding is respected, but not the vertical. The fact that it covers the other text has to do with z-indexing.
Add the below property in a.
position:relative;
float:left;
Working DEMO
TIPS:
Write background-color instead of the shorthand background when you
are not associating any other property.
If you write display:block then the block width will be equal to the parent
width, so always write width with display.
a{
padding: 30px;
background-color: red;
margin: 20px;
border-radius: 12px;
color: #fff;
font: bold 12px Arial, Helvetica, sans-serif;
text-decoration: none;
display: block;
width: 50px;
}
DEMO
Why isn't the image centered in the li? The dimensions of it is 25x25px.
#information-list li {
height: 50px;
line-height: 50px;
padding: 0 10px;
border-bottom: 1px solid #c1c0bf;
}
#information-list li img {
vertical-align: middle;
margin-right: 10px;
}
<ul id="information-list" class="flat-list">
<li>
<img src="images/test.png" />
<strong>Foo</strong>
</li>
...
Try this instead:
#information-list li {
height: 50px;
line-height: 50px;
padding: 0 10px 0 20px;
border-bottom: 1px solid #c1c0bf;
background:transparent url(images/test.png) no-repeat left center;
}
<ul id="information-list" class="flat-list">
<li>
<strong>Foo</strong>
</li>
...
It is vertically centered for me (tested your css/markup in Chrome/Firefox/IE)
Do you have a valid doctype?
You can read about vertical-align, and how it works here.
As commented by animuson, here is how you should use inline elements and vertical-align.
Essentially, you need to vertically align both inline elements, and you did it on one only.
You should also try to keep line-height properties on blocks that contain text.
Here's a JSFiddle example - I also included some proof that it is in fact centered
CSS
#information-list li {
padding: 0 10px;
border-bottom: 1px solid #c1c0bf;
}
#information-list li img,
#information-list li span{
vertical-align:middle;
}
#information-list li span{
font-weight: bold;
line-height: 50px;
}
HTML
<ul id="information-list" class="flat-list">
<li>
<img src="images/test.png" />
<span>Foo</span>
</li>
...
Here's a screenshot
W3C will give us a bit of insight.
www.w3.org - line-height:
On a block container element whose content is composed of inline-level elements, 'line-height' specifies the minimal height of line boxes within the element.
The minimum height consists of a minimum height above the baseline and a minimum depth below it, exactly as if each line box starts with a zero-width inline box with the element's font and line height properties. We call that imaginary box a "strut." (The name is inspired by TeX.).
The height and depth of the font above and below the baseline are assumed to be metrics that are contained in the font. (For more details, see CSS level 3.)
On a non-replaced inline element, 'line-height' specifies the height that is used in the calculation of the line box height.
www.w3.org - vertical-align:
This property affects the vertical positioning inside a line box of the boxes generated by an inline-level element.
Note. Values of this property have different meanings in the context of tables. Please consult the section on table height algorithms for details.
The following values only have meaning with respect to a parent inline element, or to the strut of a parent block container element.
In the following definitions, for inline non-replaced elements, the box used for alignment is the box whose height is the 'line-height' (containing the box's glyphs and the half-leading on each side, see above). For all other elements, the box used for alignment is the margin box.
The default blocks
The HTML you provided consists of 4 blocks which have these display properties by default.
<ul> - treated as a block
<li> - treated as list-item
<img> - is treated as an inline-block (placed as inline, but formatted as a block)
<strong> - treated as inline
Try to remember them. Though they have little impact on this particular scenario, it is good to know the defaults and what they do and what they are for.
See also
9.2.2.1 Anonymous inline boxes
Any text that is directly contained inside a block container element (not inside an inline element) must be treated as an anonymous inline element.