inline-block속성
보미나
block 요소와
inline 요소는 알겠는데,
inline-block 요소는 뭔가요?
한줄짜리를 네모로 만든다른 말인가요 ㅡ,.ㅡ;;
이거 그리고 속성쓰니까 없는 요소라고 나오던데 ㅜㅜ
-
뿡뿡
감사합니다.
-
클
감사합니다!
-
예린
inline-block 브라우저 상관없이 잘 표현됩니다~
아! 하지만 inline-block속성보다 큰 block속성. 그러니깐,
div나 p ul ol li dl dt dd 등... 원래부터가 타고난 블럭속성 태그들은
inline-block을 줄 수 없습니다. (줘도 안준거나 똑같을 것 같은데;; 기억이;;;)
그래서 inline-block속성은 span이나 a같은 inline속성에 많이 쓰곤 하지요~ -
겨울
그런데 display:inline-block 은 ie7에서 바르게 표현되지 않는다고 알고 있는데 제가 잘못 아는건가요?
-
히메
그 차이는 span태그로 직접 CSS를 작성해보시는게 이해하기 제일 쉬우실 듯 한데요.
span에 margin, padding, background를 주시는데요.
display 속성을 하나씩 주는 겁니다. 이런식으로요...
span.test1 {margin:10px;padding:10;background:#ff6600;}
span.test2 {display:block;margin:10px;padding:10;background:#ff6600;}
spa -
베레기
* 블록
앞 뒤에 틈을 만든다. 즉 단락처럼 보인다. margin 과 padding, width, height 등 다 적용이 됩니다.
예: div,table,p 등
* 인라인
앞 뒤가 같은 줄에 위치한다. 좌우 margin, padding는 줄 수 있으나 상하 margin, padding, width, height 등을 사용할 수 없습니다. 이럴 때는 인라인속성을 “ 나는블록이다” 라고 착각을 주어 상하 margin, padding을 줄 수 있습니다. -
떠나간그놈
저가 알기보다 느끼기론, ie6의 경우float:left와 display:block을 사용하면 좌측에 더블마진이 생겨 이빨나간 톱같이 요상하게 나올 것입니다. 그래서 display:inline을 쓰게 되는데 이것 역시 문제점이 margin,padding의 높이에 해당하는 부분에 문제로 나중에 프로젝트까지 망치게 될 수 있다는 말씀이 있으셨습니다. 즉, 문제가 생긴다는 말이죠. 해서 inline에 block 속성이 겸해진 어떤게 필요했는데 그게 바로 in