Menu
I have a <span id="some"></span> and the css is
#some{
background-color:#000; width:150px; height:50px;
}
The width and height does not show unless something is entered. How can i fix this?
843
Span is an inline element. It has no width or height.
You can specify either 'hidden' (without value) or 'hidden="hidden"'. Both are valid. A hidden <span> element is not visible, but it maintains its position on the page.
The <span> tag is a inline element, it fits into the flow of the content and can be distributed over multiple lines. We can not specify a height or width or surround it with a margin.
span s are by default displayed inline, which means they don't have a height and width. Try adding a display: block to your span. Show activity on this post. Span starts out as an inline element.
Try using a div instead of the span or using the CSS display: block; or display: inline-block; — span is by default an inline element which cannot take width and height properties. Show activity on this post. Show activity on this post. Span takes width and height only when we make it block element.
The first span, #span1, does not have any style attributes in the HTML. So it is just showing what a default span width will have. The default width will be however much is needed for the content inside the div. The second span, #span2, has the display property set to block and its width set 300px.
If You need an empty inline span (-s) to have a width and height (for background image or something else) then there is a fix for that. Span is an inline element so it has to be filled with content and ignores the width and height but not padding, so here is the trick: span.box {. padding: 10px 20px; // height=20px, width=40px.
span is an inline element, so without telling browser that its display property as block what you do won't work out.
So in brief:
#some{
background-color:#000;
width:150px;
height:50px;
display: block;
}
Hope it helps, Sinan
104
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
