HTML Canvas 요소의 여백을 제거하는 방법은 무엇입니까?

Question

저는 다음 프로젝트에서 캔버스로 전자 레지스터 이미지를 만들려고했습니다. 이제 저항 모양을 지정했으나 여백을 제거 할 수 없었습니다.

패딩 및 여백을 0px 값으로 설정해 보았습니다. 그러나 작동하지 않는 것 같습니다.

내 HTML/CSS 코드 : 그것이 body에 적용되기 때문에

.canvas-wire { 
 
    border: 1px solid #a09898; 
 
    background-color: #a09898; 
 
    vertical-align: middle; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.canvas-film-1 { 
 
    border-radius: 8px 0px 0px 8px; 
 
    background: linear-gradient(#FFEB3B, #FF9800); 
 
    vertical-align: middle; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.canvas-film-2 { 
 
    border-radius: 0px 8px 8px 0px; 
 
    background: linear-gradient(#FFEB3B, #FF9800); 
 
    vertical-align: middle; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.canvas-film-mid { 
 
    background: linear-gradient(#FFEB3B, #FF9800); 
 
    vertical-align: middle; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.metal { 
 
    position: relative; 
 
    text-shadow: hsla(0, 0%, 40%, .5) 0 -1px 0, hsla(0, 0%, 100%, .6) 0 2px 1px; 
 
    background-color: hsl(0, 0%, 90%); 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.metal.linear { 
 
    background-image: -webkit-repeating-linear-gradient(left, hsla(0, 0%, 100%, 0) 0%, hsla(0, 0%, 100%, 0) 6%, hsla(0, 0%, 100%, .1) 7.5%), -webkit-repeating-linear-gradient(left, hsla(0, 0%, 0%, 0) 0%, hsla(0, 0%, 0%, 0) 4%, hsla(0, 0%, 0%, .03) 4.5%), -webkit-repeating-linear-gradient(left, hsla(0, 0%, 100%, 0) 0%, hsla(0, 0%, 100%, 0) 1.2%, hsla(0, 0%, 100%, .15) 2.2%), linear-gradient(180deg, hsl(0, 0%, 78%) 0%, hsl(0, 0%, 90%) 47%, hsl(0, 0%, 78%) 53%, hsl(0, 0%, 70%)100%); 
 
    margin: 0; 
 
    padding: 0; 
 
}

<div style="background-color: black; padding: 5px 10px; width: 900px; height:500px;"> 
 

 
    <canvas class="canvas-wire metal linear" width="200px" height="5px"></canvas> 
 

 
    <canvas class="canvas-film-1" width="20px" height="30px"></canvas> 
 

 
    <canvas id="canvas-band1" width="7px" height="30px" style="background-color: red; vertical-align: middle;"></canvas> 
 

 
    <canvas class="canvas-film-mid" width="20px" height="30px"></canvas> 
 

 
    <canvas id="canvas-band2" width="7px" height="30px" style="background-color: red; vertical-align: middle;"></canvas> 
 

 
    <canvas class="canvas-film-mid" width="20px" height="30px"></canvas> 
 

 
    <canvas id="canvas-band3" width="7px" height="30px" style="background-color: red; vertical-align: middle;"></canvas> 
 

 
    <canvas class="canvas-film-mid" width="20px" height="30px"></canvas> 
 

 
    <canvas id="canvas-band4" width="7px" height="30px" style="background-color: red; vertical-align: middle;"></canvas> 
 

 
    <canvas class="canvas-film-2" width="20px" height="30px"></canvas> 
 

 
    <canvas class="canvas-wire metal linear" width="200px" height="5px"></canvas> 
 

 
</div>

Answer 1

문제는 <canvas> 요소입니다. <canvas> 항목에 대해 margin-right:-4px;을 설정해야합니다. 이 주제에 대한

canvas { 
 
    margin-right:-4px; 
 
} 
 
.canvas-wire{ 
 
    border:1px solid #a09898; 
 
    background-color: #a09898; 
 
    vertical-align: middle; 
 
} 
 
.canvas-film-1{ 
 
    border-radius: 8px 0px 0px 8px; 
 
    background: linear-gradient(#FFEB3B, #FF9800); 
 
    vertical-align: middle; 
 
} 
 
.canvas-film-2{ 
 
    border-radius: 0px 8px 8px 0px; 
 
    background: linear-gradient(#FFEB3B, #FF9800); 
 
    vertical-align: middle; 
 
} 
 
.canvas-film-mid{ 
 
    background: linear-gradient(#FFEB3B, #FF9800); 
 
    vertical-align: middle; 
 
} 
 
.metal { 
 
    position: relative; 
 
    text-shadow: hsla(0,0%,40%,.5) 0 -1px 0, hsla(0,0%,100%,.6) 0 2px 1px; 
 
    background-color: hsl(0,0%,90%); 
 
} 
 
.metal.linear { 
 
    background-image: -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 6%, hsla(0,0%,100%, .1) 7.5%), -webkit-repeating-linear-gradient(left, hsla(0,0%, 0%,0) 0%, hsla(0,0%, 0%,0) 4%, hsla(0,0%, 0%,.03) 4.5%), -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.15) 2.2%), linear-gradient(180deg, hsl(0,0%,78%) 0%, hsl(0,0%,90%) 47%, hsl(0,0%,78%) 53%, hsl(0,0%,70%)100%); 
 
}

<div style="background-color: black; padding: 5px 10px; width: 900px; height:500px;"> 
 
    <canvas class="canvas-wire metal linear" width="200px" height="5px"></canvas> 
 
    <canvas class="canvas-film-1" width="20px" height="30px"></canvas> 
 
    <canvas id="canvas-band1" width="7px" height="30px" style="background-color: red; vertical-align: middle;"></canvas> 
 
    <canvas class="canvas-film-mid" width="20px" height="30px"></canvas> 
 
    <canvas id="canvas-band2" width="7px" height="30px" style="background-color: red; vertical-align: middle;"></canvas> 
 
    <canvas class="canvas-film-mid" width="20px" height="30px"></canvas> 
 
    <canvas id="canvas-band3" width="7px" height="30px" style="background-color: red; vertical-align: middle;"></canvas> 
 
    <canvas class="canvas-film-mid" width="20px" height="30px"></canvas> 
 
    <canvas id="canvas-band4" width="7px" height="30px" style="background-color: red; vertical-align: middle;"></canvas> 
 
    <canvas class="canvas-film-2" width="20px" height="30px"></canvas> 
 
    <canvas class="canvas-wire metal linear" width="200px" height="5px"></canvas> 
 
</div>

더 많은 정보 : 다음 솔루션을 참조https://css-tricks.com/fighting-the-space-between-inline-block-elements/

Answer 2

현재 코드와 함께 당신은 마진을보고있다. 문제를 해결하려면 body {margin: 0}을 적용하고 래퍼 div에 대해 동일한 속성을 적용하기 만하면됩니다.

Here은 완전한 코드가있는 JSfiddle입니다.