web-dev-qa-db-ja.com

CSSでボックスの下枠を削除する方法

alt text

上記のような長方形のdivがあります。 divの下枠（CからD）を削除したい。これどうやってするの？。

編集：これが私のCSSです：

#index-03 {
  position: absolute;
  border: .1px solid #900;
  border-width: .1px;
  border-style: solid;
  border-color: #900;
  left: 0px;
  top: 102px;
  width: 900px;
  height: 27px;
}
<div id="index-03" 
     style="background-color:limegreen; width:300px; height:75px;">
</div>
cssborder
21
Gandalf

追加するだけ：border-bottom: none;

#index-03 {
    position:absolute;
    border: .1px solid #900;
    border-bottom: none;
    left:0px;
    top:102px;
    width:900px;
    height:27px;
}
61
DaiYoukai

あなたはボックスモデルを誤解しているようです-CSSでは上と左にポイントを提供し、次に幅と高さを提供します-これらは正確な測定でボックスを配置するために必要なすべてです。

widthプロパティはC-Dですが、それはA-Bです。省略した場合、divには幅が定義されず、幅はその内容によって定義されます。

更新（質問のコメントに従って：

border-bottom-style: none; をCSSに追加して、このスタイルを下部からのみ削除します。

2
Oded

どちらでも設定できます

border-bottom: none;

または

border-bottom: 0;

border-styleをnoneに設定します。
1つはborder-widthを0pxに設定します。

div {
  border: 3px solid #900;

  background-color: limegreen; 
  width:  28vw;
  height: 10vw;
  margin:  1vw;
  text-align: center;
  float: left;
}

.stylenone {
  border-bottom: none;
}
.widthzero {
  border-bottom: 0;
}
<div>
(full border)
</div>
<div class="stylenone">
(style)<br><br>

border-bottom: none;
</div>
<div class="widthzero">
(width)<br><br>
border-bottom: 0;
</div>

サイドノート：
予想どおりに境界線が表示されない理由を追跡する必要がある場合、これらのいずれかが原因である可能性があることも知っておくとよいでしょう。また、border-colorがbackground-colorと同じでないことを確認してください。

1
SherylHohman

幅をautoに設定するだけです。次に、コンテンツがない場合、divの幅は0になります。

width:auto;
0
DADU