[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 251
  • Last Modified:

Trying to add a space in html or css

I am trying to add a space in html or css to a div so that there is a total of 36 pixels of space between the top of my page and where I want the next div to begin.  I used a space image that is 1 pixels wide and 36 pixels high but apparently it did not work.  What am I doing wrong?
1 Solution
Tom BeckCommented:
Hard to say without seeing the code, but something like this will create the space you describe:

<div style="width:1px;height:36px;background-image:url(images/spacer.gif)"></div>

Even without the background image, it will create space.

<div style="width:1px;height:36px"></div>

It can be helpful if you are troubleshooting to add a border so you can see something on screen.

<div style="width:1px;height:36px;border:solid 1px #000"></div>
I 2nd tommyBoy's suggestions. I would post some code or a live URL if you still can't get it.  However, remember that if your displaying a div, it will automatically display:block and break whatever element is following it to the next line.  You will have to use display:inline in order to create just a "space" between elements.
Would this work?
<div style="margin-top: 36px;">

Open in new window

This would add a margin of 36 pixels to the top of the div you are trying to push down.
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.


could you please share the code or live url, so that I can review the code and can provide you the solution.

zappafan2k2 is completely correct, why on earth would you be trying to use spacer gifs or empty divs when you can simply use margin-top OR padding-top?

when you want to show some content in the same, you need to give height to the same div, while, margin and padding does not allow to put any text/image in the area of padding/margin (e.g. margin-top: 36px; the 36px space would be blank, you cann't put a single letter in the 36px)

I see your point, yes sometimes you do need to set a height or a max-height but using spacer gifs is really a thing of the past.

And if you are using an empty div, it is usually a good idea to add a &nbsp; so the browser renders the div and its' styles.

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now