Jump to content

Spans that push?


davej
 Share

Recommended Posts

Assigning a width to a span seems to have no effect. What if you want a span to occupy a certain width (i.e. push against other elements)? I don't remember how to do this. Thanks

Link to comment
Share on other sites

Empty or not empty I'm seemingly unable to push anything over with the span with an assigned width.

<!DOCTYPE html><html lang="en"><head><style>.ww{width: 500px;height: 60px;}</style></head><body><span class="ww">Some text:</span><input type="text"/></body></html>

Edited by davej
Link to comment
Share on other sites

Spans are allowed to have horizontal margins and padding. Height, vertical padding and vertical margins don't work, but you can use line-height.

Link to comment
Share on other sites

I noticed from the other post that float seems to be one solution...

<!DOCTYPE html><html lang="en"><head><style>.ww{width: 100px;height: 60px;float: left;}</style></head><body><span class="ww">Some text:</span><input type="text"/></body></html>

Link to comment
Share on other sites

Float doesn't really do anything, maybe it makes it behave more like a block. If you set the display: to block and then float it will allow width and height to be set.

Link to comment
Share on other sites

The width is what is of interest to me. I wanted to try to avoid using a table to align the input fields similar to the situation in the other post. Float seems to be one possible fix.

Link to comment
Share on other sites

the issue is that <span> is an inline element, and doesn't "respond" to width/height styles. In order for it to do so, you could give it

span{  display: inline-block;  height: 50px;  width: 300px;}

Edited by thescientist
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...