HTML/CSS에서 텍스트 상자의 여백을 완전히 제거하려면 어떻게해야합니까?

StackOverflow https://stackoverflow.com/questions/413573

  •  03-07-2019
  •  | 
  •  

문제

다음 HTML이 있습니다 

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
    <style>
    .box
    {
        border:solid black 1px;
        padding:0px;
        margin:0px;
    }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <input class="box" style="width:300px;" /><br />
        <input class="box" style="width:150px;" />
        <input class="box" style="width:150px;" /><br />
        <input class="box" style="width:100px;" />
        <input class="box" style="width:100px;" />
        <input class="box" style="width:100px;" />
    </form>
</body>
</html>

아이디어는 텍스트 박스가 오른쪽에서 완벽한 픽셀을 완성해야한다는 것입니다.

나는 결국 2 행과 3에 간격을 추가하여 너비를 확대하여 보상 할 것입니다.

그래서 이 텍스트 상자의 여백을 제대로 정렬하도록하려면 어떻게해야합니까?

도움이 되었습니까?

해결책

그들은 그들 사이의 공백으로 인해 줄을 서지 않습니다.

당신이 <input> 요소, 원하는대로 표시됩니다.

다른 팁

나는 추가를 발견했다 float: left; .box에게 원하는 것을했습니다.

.box {
    padding:0px;
    margin:0px;
    float: left;
}

모든 텍스트 상자를 올바르게 정당화하는 것에 대해 이야기하고 있습니까?

그렇다면 마진 문제가 아닙니다. 그것은 단순히 텍스트 상자를 포함 요소에 넣는 것입니다. 아마도 A와 텍스트 정렬을 설정합니다. 오른쪽; Div의 CSS 스타일.

테두리는 너비에 포함되어 있지 않으므로 1px 테두리와 폭 150px가있는 상자는 실제로 152px입니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top