CSS 同一列中的兩個 DIV 如何上下間距

元素之間的邊距可以使用 margin 實現：

margin:top right bottom left;*分別為上邊距、右邊距、下邊距和左邊距

這是 CSS 框模型的一部分 - 指定元素框如何處理元素內容、填充、邊框和填充

元素邊框周圍的空白區域是邊距，設定邊距會在元素外部建立乙個額外的“空白區域”。 設定邊距的最簡單方法是使用 margin 屬性，該屬性接受任何長度單位、百分位值甚至負值。

元素的填充位於邊框和內容區域之間，控制該區域的最簡單屬性是填充屬性，該屬性可以接受長度值或百分比值，但不允許使用負值。

元素的邊框是元素內容和填充周圍的一條或多條線，可以使用 border 屬性來指定元素邊框的樣式、寬度和顏色。

下面是乙個簡單的示例：

在 html 中新增兩個 div**

設定 CSS 樣式。

div 來觀察效果。

把 div 想象成乙個盒子，盒子邊界外的間距是邊距，邊界的內側是填充，如果頂部和底部相鄰的 div 有邊距，則值是較大的乙個。

您只需要設定其中乙個邊距。

如何設定兩個 div 之間的間距：

首先定義兩個 div，每個 div 中都有乙個段落。

2.為兩個 div 新增不同的背景顏色，以便更輕鬆地檢視 div 的位置。

3.設定 div 的邊距; 使兩個 div 之間的間距更寬。

這解決了增加兩個 div 之間間距的問題。

擴充套件跟蹤程式碼配置檔案：

div 的常用屬性。

設定 div 的高度; width：設定 div 的寬度。

用於設定 div 的擴充套件邊距，即與父容器的距離。 margin:

它後面跟著四個距離，分別是到父容器的右上-左下-距離; margin: [top][right][bottom][left]

用於設定 div 姿勢的填充（子元素和 div 邊界之間的距離）。 填充：後跟四個距離，即到父容器的右上-左下-距離;

設定 div 的邊框樣式;

設定div的背景樣式; 背景後，可直接遵循背景顏色、背景**、平鋪方式等樣式。

設定 div 的定位方式。 位置有四個屬性：靜態、固定、相對和絕對。 常用的相對和絕對。

設定顯示屬性。 它的值是塊，無;

在頁面上設定 div 的流向，其值為 left、right 和 none。

您可以使用 CSS margin 屬性來控制兩個 div 之間的距離定義和用法margin shorthand 屬性在單個宣告中設定所有 margin 屬性。 該屬性可以有 1 到 4 個值。

描述

此速記屬性設定元素的所有邊距的寬度，或每邊邊距的寬度。

塊級元素的垂直相鄰邊距被合併，而內嵌元素實際上並不占用上邊距和下邊距。 內聯元素的左邊距和右邊距不會合併。 同樣，浮動元素的邊距也不會合併。 允許使用負邊距值，但使用時要小心。

評論：允許使用負值。

示例 1margin： 10px 5px 15px 20px;

頂部填充為 10px

右邊距為 5px

底部填充為 15px

左邊距為 20px

示例 2margin： 10px 5px 15px;

頂部填充為 10px

右邊距和左邊距為 5px

底部填充為 15px

示例 3margin： 10px 5px;

上下邊距為 10px

右邊距和左邊距為 5px

示例 4margin：10px;

所有 4 個邊距均為 10px

有保證金

或者你用乙個 div 填充它，這個 div 只有乙個位置。

寬度和高度是自己設定的，效果不一樣。

您可以設定保證金、保證金

實際上，如果只有一行，可以在最後一行設定float：right。

如果行數多，只能使用特殊方法，例如：總寬度800px，分為4列，間距10px（800px-3*10px）4=這樣給出每個div的寬度約為192px;

CSS 定義了右邊距：10px（右邊距）和左邊距：0px（即左邊距）。

然後指定一種樣式，例如。 last 消除最後乙個 div 的右邊距，並在每行最後乙個 div 時使用 class="last"即刪除最後乙個 div 的右邊距，以便達到右邊距。

不知道大家能不能看懂參考：

每個 div 定義右邊距，最後乙個 div 消除右邊距。

我通常就是這樣做的。 希望對你有所幫助！