Quote from Head first html:
You can add padding to the top and bottom of inline element, but the padding doesn’t affect the spacing of the other inline elements around it, so the padding will overlap other inline elements
a) As far as I understand the above quote, adding padding to the top and bottom of inline element doesn’t ( ever ) have any effects on surrounding elements and thus on the look of the page?!
b) But what exactly is meant by “padding will overlap other inline elements”? Does it perhaps suggest that in certain circumstances padding ( top and bottom of an inline element ) will have effect on the look of the page?!
thanx
Use inline-block instead. Add these properties to all the elements on which you want to add padding. For example:
a:link {
display: inline-block;
display: -moz-inline-box;
-moz-box-orient: vertical;
vertical-align: top;
zoom: 1;
*display: inline;
}
If I understand correctly, and from an example I just made:
a) the text is an inline element, so me adding a span with top and bottom padding is not pushing the other lines down
b) as you can see, since I've added a color to the span, the color will overlap the other lines.
I hope this is both right, and answers your question :D
Try this:
<style type="text/css">
div { background: blue; height: 4em; padding: 1em }
span { background: red; padding: .5em; }
</style>
<div>
<span>one</span>
<br/>
<span>two</span>
</div>
The padding will affect the element itself. For example, any text within the element will be more padded from other DOM elements.
Related
Quote from Head first html:
You can add padding to the top and bottom of inline element, but the padding doesn’t affect the spacing of the other inline elements around it, so the padding will overlap other inline elements
a) As far as I understand the above quote, adding padding to the top and bottom of inline element doesn’t ( ever ) have any effects on surrounding elements and thus on the look of the page?!
b) But what exactly is meant by “padding will overlap other inline elements”? Does it perhaps suggest that in certain circumstances padding ( top and bottom of an inline element ) will have effect on the look of the page?!
thanx
Use inline-block instead. Add these properties to all the elements on which you want to add padding. For example:
a:link {
display: inline-block;
display: -moz-inline-box;
-moz-box-orient: vertical;
vertical-align: top;
zoom: 1;
*display: inline;
}
If I understand correctly, and from an example I just made:
a) the text is an inline element, so me adding a span with top and bottom padding is not pushing the other lines down
b) as you can see, since I've added a color to the span, the color will overlap the other lines.
I hope this is both right, and answers your question :D
Try this:
<style type="text/css">
div { background: blue; height: 4em; padding: 1em }
span { background: red; padding: .5em; }
</style>
<div>
<span>one</span>
<br/>
<span>two</span>
</div>
The padding will affect the element itself. For example, any text within the element will be more padded from other DOM elements.
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 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
I know this is very basic CSS. How do I keep the span contained within the div? At the moment, the span extends outside the top and bottom of the div.
div {
width: 200px;
margin: 10px;
background-color: #ff0;
}
span {
margin: 5px;
padding: 5px;
background-color: #fc0;
}
<body>
<div>
<span>span</span>
</div>
</body>
To answer your question, this isn't just an issue with padding or margin, but also with width, display, and the box model.
jsFiddle
span {
display: inline-block;
}
This will honor any padding, margins, or widths you apply to the span.
Inline elements will not consume vertical padding and margin space. You can make the span display: block, but without more detail I don't know if that will achieve your goal.
The vertical padding, border and margin of an inline, non-replaced box (e.g. span) 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. Therefore you see an overlapping here: http://jsfiddle.net/Q9AED/
If you want to use a straightforward solution, you can use line-height rather than display: inline-block: using line-height.
display: inline-block works in Safari >= 2, Opera >= 9, IE >= 8, Firefox > 3. But you can imitate an inline-block in IE < 8: display: inline; zoom: 1.