CSS保證金問題

我開始使用HTML和CSS。
我在頁面上有一個div元素，它不會填滿整個頁面。
其中有一個ul元素和一些列表項。
我想從div元素的頂部放置227px的列表，但是我無法設法完成此操作，而是將它推向更多位置。
另外 - 列表項之間我想要一個40像素的邊距，但它也做得更多。
有什麼問題？
這裏是我的代碼：
HTML：CSS保證金問題

<body> 
    <div class="Hashta"> 
     <div class="Menu"> 
      <ul id="MenuItems"> 
       <li><a href="#" >ONE</a></li> 
       <li><a href="#" >TWO</a></li> 
       <li><a href="#" >THREE</a></li> 
       <li><a href="#" >FOUR</a></li> 
      </ul> 
     </div> 
    </div> 
</body>

CSS：

body { 
    background-color: Gray; 
} 
.Hashta{ 
    width:874px; 
    height:650px; 
    background-color:black; 
    margin: auto auto 50px auto; 
    border-radius: 20px; 
    border: 3px solid darkgray; 
    moz-box-shadow: 2px 2px 10px black; 
    webkit-box-shadow: 2px 2px 10px black; 
    box-shadow: 2px 2px 10px black; 
} 
.Menu { 
    margin-top: 227px; 
    padding-right: 50px; 
    float:right; 
} 

#MenuItems { 
    list-style:none; 
} 
#MenuItems li { 
    text-align:center; 
    position:relative; 
    padding: 4px 10px 4px 10px; 
    margin-right:30px; 
    margin-bottom: 40px; 
    border:none; 
} 

#MenuItems li a{ 
    width: 280px; 
    height: 70px; 
    background-color: green; 
    color:White; 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:24px; 
    display:block; 
    outline:0; 
    text-decoration:none; 
    text-shadow: 1px 1px 1px #000; 
    line-height: 70px; 
}

如果你要測量的pixels-可以安裝這樣的：http://www.mioplanet.com/products/pixelruler/ （點擊旋轉）
謝謝！

來源

2011-06-23 amitairos

如果你剛開始，我會考慮使用重置樣式表。我總是使用一個，它絕對有幫助。它剝去了所有瀏覽器相關的樣式，並通過給你一個「空白畫布」使它變得更容易。我總是使用這一個http://meyerweb.com/eric/tools/css/reset/ – zik

看起來好像我 - [Sample]（http://jsfiddle.net/2XBWn/） –

請記住，如果你使用CSS重置，您最好將您未設置的合理默認值替換爲其他人。有原因的默認樣式。 – You

您應該通過重置所有元素來啓動樣式，以便每個瀏覽器顯示它們完全相同。

您可以檢查許多CSS重置庫之一附近，但開始這樣的事情是已經很好：

* { 
    margin: 0; 
    padding: 0; 
}

這一點，在你的CSS樣式表中出現的第一位，將刪除所有的利潤和每個元素的填充，所以您可以稍後將其添加到所需的元素中。

更新如果你想要的代碼（例如在體內）後恢復一些元素保證金或墊襯乾脆寫前一個後一個新的規則，像

body { 
    padding:10px; /* Add 10px to body only */ 
}

來源

2011-06-23 13:42:21

使用重置樣式表可能很有用，但在這種情況下它不會幫助OP。 – NGLN

閱讀這個問題，有一個不適合頁面的div（body padding也許？），還有「我想從div元素的頂部放置227px列表，但是我無法完成這個任務 - 它推動更多此外，在列表項之間，我想要一個40像素的邊距，但它也做得更多。「所以我認爲重置將是一個很好的開始，只是可以肯定的。 –

謝謝。那就是訣竅。保證金和填充工作現在就像我想要的那樣。一個問題：我可以排除身體因素嗎？ – amitairos

試試絕對定位：

.Hashta{ 
    width:874px; 
    height:650px; 
    background-color:black; 
    margin: auto auto 50px auto; 
    border-radius: 20px; 
    border: 3px solid darkgray; 
    moz-box-shadow: 2px 2px 10px black; 
    webkit-box-shadow: 2px 2px 10px black; 
    box-shadow: 2px 2px 10px black; 
    position:relative; 
} 
.Menu { 
     position:absolute; 
     top:227px; 
     right:0; 
     padding-right: 50px; 
     float:right; 
    }

來源

2011-06-23 13:25:57 Andreas

Total _height_ = height + padding + border + margin – NGLN

你說的對@NGLN，但填充是在一個元素的邊界內，並沒有在兩個元素之間的差距中考慮。 –

我將.Menu邊距改爲了填充，但仍然比我想要的大20px左右。 – amitairos

每個列表項的總高度爲高度+填充+邊框+餘量。

變化#MenuItems li填充到：

padding: 0 10px 0 10px;

見http://jsfiddle.net/NGLN/rBjrD/1/

來源

2011-06-23 13:34:56 NGLN

爲body

添加margin:0; padding:0在#MenuItems li取代：

padding: 4px 10px 4px 10px;

有：

margin: 4px 10px 4px 10px;

這將使按鈕之間的距離等於40px。

來源

2011-06-23 13:37:46

它的確如此，但不是因爲你聲明的原因。進一步下降的聲明是另一個保證金底部，導致所需的40px保證金，而不是yóur保證金聲明。 Forthermore：這個問題的答案仍然沒有解決問題的其他部分，即在頂部設置特定的邊距。 – NGLN

試試這個：

<style> 
body { 
    background-color: Gray; 
} 
.Hashta{ 
    width:874px; 
    height:650px; 
    background-color:black; 
    margin: auto auto 50px auto; 
    border-radius: 20px; 
    border: 3px solid darkgray; 
    moz-box-shadow: 2px 2px 10px black; 
    webkit-box-shadow: 2px 2px 10px black; 
    box-shadow: 2px 2px 10px black; 
} 
.Menu { 
    margin-top: 227px; 
    padding-right: 50px; 
    float:right; 
} 

#MenuItems { 
    list-style:none; 
} 
.secLi{ 
    text-align:center; 
    position:relative; 
    padding: 0px 10px 0px 10px; 
    margin-right:30px; 
    margin-top: 40px; 
    border:none; 
} 
.firstLi{ 
    text-align:center; 
    position:relative; 
    padding: 0px 10px 0px 10px; 
    margin-right:30px; 
    margin-top: -16px; 
    border:none; 
} 

#MenuItems li a{ 
    width: 280px; 
    height: 70px; 
    background-color: green; 
    color:White; 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:24px; 
    display:block; 
    outline:0; 
    text-decoration:none; 
    text-shadow: 1px 1px 1px #000; 
    line-height: 70px; 
} 
</style> 

<body> 
    <div class="Hashta"> 

     <div class="Menu"> 
      <ul id="MenuItems"> 
       <li class="firstLi"><a href="#" >ONE</a></li> 
       <li class="secLi"><a href="#" >TWO</a></li> 
       <li class="secLi"><a href="#" >THREE</a></li> 
       <li class="secLi"><a href="#" >FOUR</a></li> 
      </ul> 
     </div> 
    </div> 
</body>

來源

2011-06-23 13:50:00 kleinohad

這是抄襲。 – NGLN

CSS保證金問題

回答

相關問題