3つの画像の間にスペースを追加するにはどうすればいいですか？

Question

データベースから3つのイメージを取得し、それらをグリッドビューに表示しました。問題は、私が3つの画像すべての間にスペースを得ることができないということです。

セルのスペーシング値を指定しても機能しません。ここではイメージです：コードの下

<asp:Content ID="Content2" ContentPlaceHolderID="Home" Runat="Server"> 
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
    DataKeyNames="packid" DataSourceID="SqlDataSource1" GridLines="None"> 
    <Columns> 
     <asp:BoundField DataField="packid" HeaderText="packid" InsertVisible="False" 
      ReadOnly="True" SortExpression="packid" ItemStyle-Width="95px" /> 
     <asp:BoundField DataField="packname" HeaderText="packname" 
      SortExpression="packname" /> 
     <asp:BoundField DataField="categoryname" HeaderText="categoryname" 
      SortExpression="categoryname" /> 
     <asp:BoundField DataField="subcatname" HeaderText="subcatname" 
      SortExpression="subcatname" /> 
     <asp:BoundField DataField="packageprice" HeaderText="packageprice" 
      SortExpression="packageprice"/> 
     <asp:TemplateField HeaderText="pic1" SortExpression="pic1" ItemStyle-Width="80px"> 
      <EditItemTemplate> 
       <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("pic1") %>'></asp:TextBox> 
      </EditItemTemplate> 
      <ItemTemplate> 
       <asp:Image ID="Image1" runat="server" Height="50px" 
        ImageUrl='<%# Eval("pic1") %>' Width="80px" /> 
      </ItemTemplate> 
      <HeaderStyle Width="60px" /> 
     </asp:TemplateField> 
     <asp:TemplateField HeaderText="pic2" SortExpression="pic2" ItemStyle-Width="80px"> 
      <EditItemTemplate> 
       <asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("pic2") %>'></asp:TextBox> 
      </EditItemTemplate> 
      <ItemTemplate> 
       <asp:Image ID="Image2" runat="server" Height="50px" 
        ImageUrl='<%# Eval("pic2") %>' Width="80px" /> 
      </ItemTemplate> 
     </asp:TemplateField> 
     <asp:TemplateField HeaderText="pic3" SortExpression="pic3" ItemStyle-Width="80px"> 
      <EditItemTemplate> 
       <asp:TextBox ID="TextBox3" runat="server" Text='<%# Bind("pic3") %>'></asp:TextBox> 
      </EditItemTemplate> 
      <ItemTemplate> 
       <asp:Image ID="Image3" runat="server" Height="50px" 
        ImageUrl='<%# Eval("pic3") %>' Width="80px" /> 
      </ItemTemplate> 
     </asp:TemplateField> 
    </Columns> 
</asp:GridView> 



<asp:SqlDataSource ID="SqlDataSource1" runat="server" 
    ConnectionString="<%$ ConnectionStrings:ToursandTravelsConnectionString %>" 
    SelectCommand="SELECT [packid], [packname], [categoryname], [subcatname], [packageprice], [pic1], [pic2], [pic3] FROM [package]"></asp:SqlDataSource> 

</asp:Content> 

Answer 1

を試してみてくださいかどうかを確認します。このようなあなたのイメージののCssClassを設定します。

<asp:Image ID="Image2" runat="server" CssClass="imgDist" Height="50px" 
       ImageUrl='<%# Eval("pic2") %>' Width="80px" /> 

と、あなたのスタイル内でこの操作を行います。ただ、これを追加し、

<style> 
    .imgDist { 
     margin:5px; 
    } 
</style> 

または代わりのクラスを設定し、それはすべての画像に適用されます。

<style> 
    img { 
     margin:5px; 
    } 
</style> 

Answer 2

書き込み及びその作業か

<asp:Image ID="Image3" runat="server" Height="50px" 
        ImageUrl='<%# Eval("pic3") %>' Width="80px" style="padding-left:10px; padding-right:10px" /> 

はあなたの問題を解決する少し余裕を追加するこの