Where to put element controls?

Question

I have the following:

I think it's less than ideal because the edit/delete buttons are requiring me to waste a bunch of vertical whitespace within the element.

Options that I can think of:

• Bring the editable area up to take back that whitespace but then content has a chance of overlapping with the controls, which would be ugly.
• Same as above but make the controls show up only when the mouse rolls over them, which is something I'd like to avoid (I prefer always-there controls), but it seems like the best compromise out of everything I can think of
• Move the controls above or to the right of the box - wasting whitespace from the layout instead of the element
• change the way the controls work by using a select-then-edit model, but this still requires a checkbox to be placed somewhere, resulting in the same problem.

Where to these controls belong when the space within the element is so valuable?

Answer 1

Why not place an edit tab at the bottom and then display the edit/delete buttons when it expands up? Users will be entering their code from the top and this tab will not interfere with the content since it will always be on the same line as the next line of code. The bottom line of the visible area will always be blank since the content will shift up...

^{download bmml source – Wireframes created with Balsamiq Mockups}

I could be totally misunderstanding your question though.