html - 表单内 p 标签的 css

Question

我想在p标签前留一些空间。但是现在我贴在左边。我想在p标签前留100px。 我附上了我的 css 和 html。名称和电子邮件被打到左边的位置。

p {
    margin-left:100px;
}
.outer {
    margin-left: 20%;
    margin-top: 0%;
    margin-bottom: 3%;
    height: 737px;
    width: 60%;
    box-shadow: 10px 10px 5px #888888;
    border: 1px solid #f9f2f2;
    border-radius: 10px;
}
button.logout {
    display:inline;
    float:right;
    margin-right:10px;
    margin-left: 5px;
}
.lout {
    float: right;
    display: inline-block;
    margin-top:20px;
}
.log {
    width:60%;
    height: 10%;
    position:absolute;
    border: 1px solid #f9f2f2;
    border-radius: 10px;
    border: 0px solid #f9f2f2;
    text-align: center;
    line-height:20px;
    border-width: 0px 0px 1px 1px;
    display:inline-block;
}
.rest {
    padding:7%;
    height: 580px;
    padding: 10% 7px;
}
.sidemenu {
    float: left;
    margin-top: 140px;
    width: 100%;
}
hr {
    margin: 0;
    width: 1px;
    height: 658px;
    border: 0;
    background: #000;
    float: left;
}
.content {
}
.side {
    width: 24%;
    float: left;
    display: inline-block;
}

<div class="outer">
    <div class="log">
        <form name="profile" method="post" class="lout">
            <button class="done" name="done">Done</button>
            <button class="logout" name="logout">Logout</button>
    </div><!--End of log div -->
        
    <div class="rest">
        <div class="side">
            <div class="sidemenu"></div>
        </div><!--End of side div -->
        
        <hr>
        
        <div class="content">
             <h1>Profile</h1>

            <br>
            <br>
            <br>
            <br>
            <p>name</p>
            <p>email</p>
        </form>
    </div><!--End of content -->

Answer 1

你的 <div class="side">有一个 float: left .但是由于 div 很短而且你的 <div class="content">更长，它环绕着侧面的div。您所需要的只是内容的 float :

.content {
  float: left;
}