html - 如何在内容周围制作边框

Question

我想要 <div class="ghassar">在我的内容周围创建一个边框，但是当我试图让所有内容的边框消失时，我怎样才能在内容周围制作一个边框而不让它们消失。我想每当我创建一个边框时它隐藏了它后面的内容，有什么方法可以解决这个问题，我如何在不使用标签 <br> 的情况下在内容之间留出空间？ 对于 div 标签，我应该使用 class 还是 id

HTML

<div class="ghassar">
    <div id="op">
        <label>Number of days</label>
        <select name="days">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
        </select>
        <br><br><br><br>
    </div>
    <div>
        <input type="submit" value="Add to the basket" name="rent" id="buttom1" />
    </div>
    <br><br><br><br>
<div>

CSS

.ghassar {
    margin-left: 600px;
    border: 2px solid;
    padding: 10px 40px;
    width: 300px;
    border-radius: 25px;
}

Demo

Answer 1

我稍微清理了 HTML，边框工作正常 jsFiddle :

<div class="ghassar">
    <div id="op">
        <label>Number of days</label>
        <select name="days">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
        </select>
    </div>
    <div id="add-to-basket">
        <input type="submit" value="Add to the basket" name="rent" id="buttom1" />
    </div>
</div>

and how can i make space between the content without using the tag <br>

您可以使用边距，就像我在这里所做的那样:

#add-to-basket { margin: 50px auto; position: relative; }

and for the div tag shall i use class or id

这取决于你在做什么。页面上的元素不能共享相同的 id，但多个元素可以具有相同的类。

---

更新:正如其他答案中提到的，如果您不想要默认值，您还应该设置边框颜色。您可以使用简写方式来做到这一点:

border:2px solid #f00; /* #f00 is the color red*/

或

border-color: #f00