htmlを
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="test.css">
<title>margin test</title>
</head>
<body>
<div class="panel">
<a href="#">要素1</a>
<a href="#">要素2</a>
</div>
</body>
</html>
のようにし、cssを
*,
*:after,
*:before{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
-webkit-overflow-scrolling: touch;
}
html,
body{
position: relative;
overflow-x: hidden;
width: 100%;
height: 100%;
text-align: center;
background-color: #f9f9f9;
}
h1{
font-size: 2.5em;
position: relative;
transition: all .3s ease 0s;
font-weight: lighter;
font-family: 'arial';
cursor: pointer;
}
p{
font-size: 1.4em;
font-weight: normal;
font-family: 'arial';
color: #333;
}
a{
text-decoration: none;
}
.panel{
position: absolute;
width: 98%;
right: 1%;
left: 1%;
min-height: 100%;
padding: 1em;
z-index: 2;
background-color: #fff;
border: 1px solid #e9e9e9;
}
.panel > a{
text-decoration: none;
font-size: 1.4em;
font-weight: normal;
font-family: 'arial';
color: #333;
border-bottom: 1.5px solid rgba(0,0,0,0);
transition: all .4s ease 0s;
}
.panel > a:hover{
border-bottom: 1.5px solid #333;
transition: all .4s ease 0s;
}
のようにしたときに、margin-top,padding-top,top等が効かない原因がわかりません
また、aの要素を縦並びにする方法も知りたいです