Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Inline horizontal spacer in HTML

Tags:

html

I am making a Web page with a slideshow, using the same technique used on http://zine.pocoo.org/. The person I'm making the site for wants the slideshow to be centered. However, some of the photos are portrait layout and some are landscape. (This was not my choice.) I need a position: absolute to get the li's containing the items in the right place, so centering them does not work. (At least, not by normal methods.)

So, I thought that it might work to insert a 124-pixel "spacer" before the image on the portrait pictures. I tried it with a <span style="width: 124px;">&nbsp;</span>, but it only inserts a single space, not the full 124 pixels. The slideshow fades in and out OK, though, so I think that it would work if I could get the proper spacing.

My question is this: does anyone know a way to have 124px of space inline in HTML (preferably without using images), or another way to center the pictures in the li items?

like image 683
LeafStorm Avatar asked Jun 03 '10 16:06

LeafStorm


People also ask

How do I add a horizontal spacer in HTML?

To create extra spaces before, after, or in-between your text, use the &nbsp; (non-breaking space) extended HTML character. For example, with the phrasing "extra space" using a double space, we have the following code in our HTML.

How do you put spaces between elements in HTML?

You can use the &nbsp; HTML entity to create blank spaces in both paragraph text and text in tables, for example. Since there is no blank space keyboard character in HTML, you must type the entity &nbsp; for each space to add. To insert blank spaces in text in HTML, type &nbsp; for each space to add.

How do you make a space horizontally in CSS?

The width property is used to fill a div remaining horizontal space using CSS. By setting the width to 100% it takes the whole width available of its parent. Example 1: This example use width property to fill the horizontal space. It set width to 100% to fill it completely.

How do you add a spacer in CSS?

In CSS, you can use either the margin or padding properties to add space around elements. Additionally, the text-indent property adds space to the front of the text, such as for indenting paragraphs.


2 Answers

This is way old, but I guess it's still worth answering. The reason your span isn't expanding is because it's still an inline element. set display:inline-block to get it to behave more like a block element

like image 51
wjin Avatar answered Sep 19 '22 15:09

wjin


I think you need to add margin-left instead of padding-left, because the margin is outside an element, and the padding is inside.

like image 24
True Soft Avatar answered Sep 18 '22 15:09

True Soft