CSS 정리3
여백 패딩 테두리
예제이는 margin과 padding, border를 볼수 있습니다.
the properties used in that examle are shorthands and allow us to set all four side of the box at once.
margin
the margin is an invisible space around your box. int pushes other elements away from the box. whether you ar using the standard or alternative box model, the margin is always added after the size of the visible box has been calculated.
margin collapsing
A key thing to understand about margins is the concept of margin collapsing.
you can test this by setting the margin-top of paragraph two to 0. the visible margin between the two paragraphs will not change. - it retains the 50pixcels set in the bottom-margin of paragraph one. if you set it to -10px, you'll see that the overall margin becomes 40px - it substracts form the 50px
borders
- border-top
- border-right
- border-bottom
- border-left
to set the width, style, color .. use the following: border-width, border-style, border-color,
padding
the padding sits between the border and the content area. you can not have negative amounts of padding, so value must be 0 or a positive vlaue.
the box model and inline boxes
ALL of the above applies fully to block boxes. some of the properties can apply to inline boxes too, such as those created by a span element. you can see that the width and height are ignored. the vertical margin, padding, and border are respected but they do dnot change the relationship of other content to our inline box and so the padding and border overlaps other words in the paragraph.
Using display : inline-block
there is special value of display, which provides a middle ground between inline and block,
- the
width and height properties are respected- padding, margin, and border will cause other elements to be pushed away from the box.
where this can be useful is when you want to give a link to a lagrer hit area by adding padding. <a> is an inline element like <span> you can use displayLinlin-block to allow padding to be set on it, making it easier for a user to click the link.