logo와 video의 html 순서 문제

CSS/* Google Web Font */ @import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500&display=swap'); @import url('http://fonts.googleapis.com/css?family=Monoton'); @import url('https://fonts.googleapis.com/css?family=Raleway&display=swap'); body { margin: 0; color: #fff; font-family: 'Montserrat', sans-serif; font-weight: 300; } a { text-decoration: none; } /* BG Video */ .video-frame {} .video-frame video { position: fixed; min-width: 100%; min-height: 100%; } .logo { border: 5px solid red; background-color: transparent; color: transparent; z-index: -1; }

logo와 video의 html 순서 문제

Document (사진)

input 요소 높이값 부여 관련 질문

저도 크롬으로 테스트해봤는데 아래와 같이 어긋나는 현상이 발생합니다ㅜㅜ혹시 input 요소의 css에 높이값 주석처리한것도 풀어서 적용하신건가요? 패딩만 적용하거나 높이값만 적용하면 문제가 없는데 두개 다 적용하면 이런 현상이 발생합니다. 개발자모드로 확인해보면 두 요소가 높이는 60으로 동일한게 왜 이러는건지 모르겠네요(사진)

input 요소 높이값 부여 관련 질문

/* Google Web Font */ @import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500&display=swap'); body { font-family: 'Monsterrat', sans-serif; line-height: 1.5em; background-image: url(images/snow-photo.jpg); background-repeat: no-repeat; background-position: center center; background-attachment: fixed; } body::before { content: ''; background-color: #00000072; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .search { border: 1px solid red; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; } .search h1 { text-align: center; } .search input[type=text], .search input[type=submit] { outline: none; box-sizing: border-box; font-size: 18px; /* height: 60px; */ padding: 20px; color: #fff; } .search input[type=text] { width: 350px; border-radius: 30px 0 0 30px; margin-right: -6px; } .search input[type=submit] { width: 150px; border-radius: 0 30px 30px 0; background-color: orange; }전체 CSS 코드입니다.질문 올린 뒤 확인해보니 input에 padding과 height를 같이 주면 저런 현상이 발생하더라고요..그래서 input 요소끼리 수평이 안맞는 현상은 height나 padding 둘 중 하나만 주면 해결 가능하긴한데요, height와 padding을 함께 줬을때 수평이 어긋나는 원인이 혹시 어떤건지 답변 주시면 감사하겠습니다ㅜㅜ