htmlの左と下の余白を取り除きたい
解決したいこと
htmlの画面を作成していますが実行時、どうしても左と下に余白が出来てしまうので非表示にしたいです。
該当するソースコード
_Layout.cshtml
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - WebApplication4</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
<link rel="stylesheet" href="~/css/style.css" />
</head>
<body>
<div class="container">
<main role="main" class="pb-3">
@RenderBody()
</main>
</div>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
@await RenderSectionAsync("Scripts", required: false)
</body>
</html>
index.cshtml
@{
ViewData["Title"] = "Login";
}
<div class="row">
<div class="col-6 left_screen">
<h1 class="CareerManagement_title">Career<span id="xxx">Management</span></h1>
</div>
<div class="col-6 right_screen">
<h1 class="login_title">Login</h1>
<div class="yyy">
<div class=" mail_box">
<h2 class="fs-6 text mail_title">メールアドレス</h2>
<input type="text" class="w-75">
</div>
<div class=" password_box">
<h2 class="fs-6 text">パスワード</h2>
<input type="password" class="w-75">
</div>
<input type="checkbox" id="subscribeNews" name="subscribe" value="newsletter">
<label for="subscribeNews">ログイン状態を保持する</label>
<div class="button2">
<button type="button" class="btn btn-success w-75 login_btn">ログイン</button>
<button type="button" class="btn btn-outline-success w-75 register_btn">新規登録</button>
</div>
</div>
</div>
</div>
style.css
.row {
height: 100vh;
min-height: 600px;
background: linear-gradient(to right, #44b243 0%, #44b243 50%, #ffffff 50%, #ffffff 100%);
}
.CareerManagement_title {
display: flex;
justify-content: center;
align-items: center;
position:relative;
top:250px;
color:white;
}
#xxx {
color:chartreuse;
}
.login_title {
font-size:50px;
color:darkgray;
display: flex;
justify-content: center;
align-items: center;
position: relative;
top: 100px;
}
.mail_title{
}
.yyy {
position: relative;
left:75px;
top: 100px;
}
.button2 {
position: relative;
top: 50px;
}
.login_btn {
position: relative;
top: 10px;
}
.register_btn{
position:relative;
top:30px;
}
/*.mail_box {
position: relative;
top: 5px;
}
.password_box {
position: relative;
top: 20px;
}*/
自分で試したこと
親要素に対してmargin-bottom,margin-left....0等を記述したが変化がなかった。
0
