바이오 대표

[CSS] Block - Margin, Padding, Border 본문

Front_end

[CSS] Block - Margin, Padding, Border

바이오 대표 2021. 8. 13. 15:28

Block Style 에는 margin, padding, border 이 존재한다

 

[1] Margin: box의 경계선 '바깥' 공간

귤색 테두리가 Margin을 보여준다

Margin 설정 값 예시

margin: 20px            하나 -- >  상 하 좌 우 다 적용

margin: 20px, 15px      둘 -->  상 하 20, 좌 우 15 

margin : 20px, 15px, 10px, 5px    넷 --> top, right, bottom, left (시계방향으로) 

 

* collapsing margin: body 와 div가 겹치면 margin이 하나가 되어 적용 (상하에서만 발생)

 

 

[2] padding: box의 경계선부터 '안쪽' 공간

body { 
    padding: 20px;
    background-color: thistle;
}

초록 테두리가 padding을 보여준다

* id 를 이용해서 CSS에서 스타일을 줄 때는 #id이름 으로 불러올 수 있다

 

 

예시)

<!DOCTYPE html>  
<html lang="kr"> 
    <head>
        <title>HTML input Exercise</title>
        <style>
            html {
                background-color: tomato;
            }
            body{
                padding: 20px;
                background-color: thistle;
            }
            div {
                height: 150px;
                width: 150px;
                padding: 20px;
                background-color: whitesmoke;
            }
            #first{
                background-color: darkred;
            }
            #second{
                background-color: yellowgreen;
            }
            #third{
                background-color: skyblue;
            }
        </style>
    </head>
    <body>
        <div>
            <div id="first">
                <div id="second">
                    <div id="third">
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

↓

 

 

[3] border: 박스의 경계

<style>
  * {
    border: 2px solid black;
  }
</style>

* {} 를 이용하면 해당 웹페이지 전쳬에 적용된다

https://developer.mozilla.org/en-US/docs/Web/CSS/border-style 에서 다양한 border 스타일을 확인 할 수 있다 

저작자표시

'Front_end' 카테고리의 다른 글

[JS] type 변경 - String( ), Number( ), Boolean( )  (0) 2021.09.24
[JS] alert( ), prompt( ), confirm( ) 알림창  (0) 2021.09.24
[CSS] Block & Inline 특징  (0) 2021.08.13
[CSS] Box (block) & Inlines  (0) 2021.08.12
[CSS] CSS 기본형식 및 HTML 적용 방법  (0) 2021.08.12
'Front_end' Related Articles more