이 경우 여백 하단이 작동하지 않습니다.

아래 코드는 div에 두 개의 링크가 작은 너비로 표시되어 있습니다.이 경우 여백 하단이 작동하지 않습니다.

<style> 
div{ 
width: 89.5px; 
border:1px solid #ddd; 
} 

a{ 
    border:1px solid red; 
    display: inline; 

    margin-bottom:30px; 
} 
</style> 
<div> 
<a href="#">AAAAAAA</a> 
<a href="#">BBBBBBBB</a> 
</div>

margin-bottom:30px; 하나 개의 버튼을 약 30 픽셀의 또 다른 하나의 아래 것이라고 그렇게 작동하지 않는 이유는 어떤 아이디어가?

가장 좋은 방법은 입니다.이 코드를 수정하면 버튼 사이에 간격이 생깁니 까?

그리고 필요한 경우 여기 jsFiddle입니다. 고맙습니다.

출처

2015-02-03 Haradzieniec

인라인 요소에는 여백을 사용할 수 없습니다.

링크 여백에 추가해야하는 경우이 링크를 block 또는 inline-block으로 만들어야합니다. 여기서 inline-block이 필요합니다.

a {display: inline-block}

사용자가 설정

이 block, 마진이 apllied되며, 링크 폭이 100 % (또는 더 나은, 100% - side margins - paddings - borders를)입니다.

참고 :이 경우 아무 것도 수행하지 않는 display: inline을 설정합니다. 링크는 기본적으로 inline입니다.

출처

2015-02-03 16:30:45 panther

''inline-block'은 'inline'이주는 "full width가 아닌"것을 유지하고 싶을 때 더 좋으며,'block' 만 가질 수있는 여백을 사용할 수 있습니다. –

@NiettheDarkAbsol : 답변을 업데이트했습니다. 댓글을 작성할 때 방금 업데이트가 완료되었습니다. 하지만 감사합니다 :-) – panther

BTW, 인라인 상자는 가로 여백을 가질 수 있지만 세로가 아닙니다. – user3790069

나는 display : inline을 display : block으로 사용하고 있기 때문에이 문제가 발생했다.

a{ 
    border:1px solid red; 
    display: block; 

    margin-bottom:30px; 
}

출처

2015-02-03 16:30:37

'블록'과 '인라인 블록'간에는 다른 동작이 있습니다. 이 경우 인라인 블록이 더 좋습니다. OP는'display : inline'을 선언했습니다. 이것은 텍스트가 100 %가 아닌 _set 너비라는 의미입니다. – panther

display:inline 값이있는 한 그렇게 작동하지 않습니다.

값을 display:block; 또는 display:inline-block으로 변경해야합니다.

출처

2015-02-03 16:31:15 alonkol

이 경우 여백 하단이 작동하지 않습니다.

답변

관련 문제