html - 에서 텍스트에 공백을 넣는 방법

한 텍스트 상자에 원하는 경우 class 를 추가하십시오  아래처럼 css 에서 사용하십시오.

<input type='text' name='firstname' class='space'>
    .space
    {
        padding-left : 10px;
        padding-right: 10px;
    }

양쪽을 원하면 padding 를 사용할 수 있습니다  이 방법을 사용하면 창에 적절한 공간이있을 때 작동합니다. 화면 크기에 공간을 유지하려면 테두리 상자를 사용할 수 있습니다.

.space
{
    padding-left : 10px;
    padding-right: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

여기서 입력은 들여 쓰기를 위해 오른쪽 패딩을 남길 수 있습니다.

input {padding: 0 5px}

위의 입력은 왼쪽과 오른쪽으로 5px의 공간을 차지합니다.

마크 업에서 허용하는 경우 텍스트 들여 쓰기와 패딩을 결합하는 것이 좋습니다 :

text-indent: 10px;
padding-right: 20px;

또 다른 방법은 "text-align : left"와 함께 "rtl"값을 가진 "direction"속성 일 수 있습니다.

다음 코드를 시도하십시오

input{
    border: none;
    padding: 10px;
    margin: 10px;
    height: 20px;
    width: 500px;
    border:1px solid #eaeaea;
    outline:none;
}
input:hover{
    border-color: #a0a0a0 #b9b9b9 #b9b9b9 #b9b9b9;
}
input:focus{
    border-color:#4d90fe;
}

<div class="mainDiv">
<input type="text" />
</div>

입력 텍스트에 패딩을 설정할 수 있습니다 :

input {
  padding: 0 5px /* 0 is for top and bottom | 5px is for left and right */
}

다음은 CSS 패딩 속성에 대한 문서입니다 : https://www.w3schools.com/css/css_padding.asp