TreeView に表示されるノードの上下のスペーシングを調整するにはどうすればいいでしょうか。

子ノードを親ノードに接続する線を表示しない（TreeView.ShowLines プロパティが false）なら NodeStyle-NodeSpacing か NodeStyle-VerticalPadding で設定可能です。

しかし、接続線を表示する場合はそれではうまくいきません。

下の画像は、NodeStyle-VerticalPadding を 10px に設定した TreeView を表示している IE9 とその開発者ツールです（重ねて表示しています）。

NodeStyle-VerticalPadding を 10px に設定したことにより、td 要素の上下の padding が 10px に設定されてスペーシングは広がったものの、接続線の画像がデフォルトのままなので、線がつながっていません。

線がつながるようにするには、接続線の画像のサイズを大きくする必要があります。（というより、NodeStyle-NodeSpacing や NodeStyle-VerticalPadding は使わないで、画像のサイズだけでスペーシングを調整するようにします。）

接続線の画像は、デフォルトでは TreeView コントロールの埋め込みリソースから 19 x 20 サイズの GIF ファイルがダウンロードされるようになっていますが、以下の手順で変更可能です。

1. デザイン画面で TreeView の > 印をクリック。
2. 「TreeView タスク」メニューが表示されるので、［線のイメージのカスタマイズ ...］をクリック。
3. 「ASP.NET TreeView ラインイメージジェネレーター」ダイアログが表示されるので、Height を指定する（デフォルトは 20）。必要なら、幅も Width の設定で変えられます（デフォルトは 19）。
4. TreeLineImages フォルダ（存在しなければ自動生成される）の中に、上記 3 で指定したサイズの接続線の GIF イメージファイルが自動的に生成され、配置される（既存の画像ファイルがあれば置き換えられる）。

下の画像は、上記の手順で Height x Width を 40 x 40 に設定して自動生成した接続線の GIF イメージの一部です。

TreeView.LineImagesFolder プロパティに上記 4 の TreeLineImages フォルダを設定し（自動的に設定されます）、上記 3 で画像の幅（Width）を変更していたら TreeView.NodeIndent をそれに合わせて調整します。

でも、これだけではまだ一部で線がつながりません（これはデフォルトの時でも同じです）。下の画像を見てください。

上の画像が示すように、TreeView.NodeIndent プロパティで設定した幅のインデントを設けるため、td 要素の中に div 要素が配置されています。その場所に接続線がある場合は、その div 要素の中に img 要素を配置して接続線の GIF イメージを表示します。

この例では、NodeIndent="40" としたので div 要素の style 属性で width: 40px; となっています。しかし、height は常に 1px になります。

インデントだけなら height が 1px でも問題ありませんが、接続線を表示する場合は 1px ではダメです。

その問題を解決するには、以下のようなスタイルを定義して、TreeView.CssClass に設定してやります。その結果が一番上の画像です。

<style type="text/css">
    .treeview table td div
    {
        height: 100% !important;
    }    
</style>