如何刪除 html 中標簽之間的空格？

Question

所以我有這個代碼：

<form action="{{ url_for('profile') }}" method="post" enctype=multipart/form-data>
  <label for="files" class="btn btn-light btn-sm">Cambiar foto de perfil</label>
    <input id="files" style="visibility:hidden;" name="photo" type="file" required>
    <input type="file" accept="image/*">
    <label for="submit" class="btn btn-light btn-sm">Actualizar</label>
    <button style="visibility:hidden;" id="submit" type="submit"> Actualizar </button>
</form>

我想知道如何消除這些標簽之間的空間。 我已經嘗試使用 Margin="0" 並沒有發生任何事情......在此先感謝。

Answer 1

你指的是“Cambiar foto de perfil”右邊的空間嗎？ 如果是這樣，那是由於相鄰輸入的樣式設置為可見性：隱藏。 如果您希望隱藏該輸入並且不占用任何空間，則需要將其設置為 Display: none 而不是 visibility 屬性。

Answer 2

不太確定您想要實現什么 - 假設您想要一個包含 3 行輸入小部件、2 個文件上傳器和一個提交按鈕的表單，您可能希望從以下幾行開始：

 <form action="{{ url_for('profile') }}" method="post" enctype=multipart/form-data> <div> <label for="files" class="btn btn-light btn-sm">Cambiar foto de perfil:</label> <input id="files" style="visibility:visible;" name="photo" type="file" required> </div> <div> <div> <label for="images" class="btn btn-light btn-sm">Cambiar el fichero del fotos:</label> <input id="images" type="file" accept="image/*"> </div> <div> <label for="submit" class="btn btn-light btn-sm">Actualizar:</label> <button style="visibility:visible;" id="submit" type="submit"> Actualizar </button> </div> </form>

上述代碼段中的修改：

• 將每個小部件及其 label 包裝在div元素中。
• 使小部件可見
• 為圖片上傳器添加一個 label

進一步的建議：

• 添加一個成熟的 css 布局（彈性或網格）以對齊小部件和標簽。
• 將 Css styles 添加到 div 並切換display屬性以選擇性地添加或刪除小部件（注意，通常被認為是糟糕的用戶界面設計）。

MDN Web 文檔（以前的 Mozilla 開發者網絡，MDN）是學習 web 技術的絕佳資源。 您可能想查看CSS 部分，特別是CSS 布局教程。