Jam's story

[CSS] padding (안쪽여백 ) & width 속성 본문

WEB/CSS

[CSS] padding (안쪽여백 ) & width 속성

애플쩀 2022. 5. 20. 12:23
1.padding:50px;
2.padding: 50px  50px  50px  50px ;
padding-left: 50px ;
padding-right : 50px ;
padding-top: 50px ;
3. padding-bottom: 50px ; 
1,2,3 같다. 
-----
1,2 같다. 
1.padding: 25px 50px ;
2.padding: 25px 50px 25px 50px;
-------------------------
top left/right bottom 
padding: 25px 50px 100px; 

 

 

box-sizing

ex01은 그냥 width:300을 설정했고

ex02는 ex01에다 padding 10을 주어 width가 확장되었다 .

box-sizing: border-box; 을 추가하면 총 너비가 300에서 변하지 않았다.

 

div{
width:300px;
color: white;
}
div.ex1{
background-color: red;
}
div.ex2{
background-color: blue;
padding: 10px ;
border: 5px solid green;

}

 

*{
box-sizing: border-box;
}

를 추가하였다 .

 

 

 

전체코드

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="shortcut icon" type="image/x-icon" href="../images/SiSt.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
div{
width:300px;
color: white;
}
div.ex1{
background-color: red;
}
div.ex2{
background-color: blue;
padding: 10px ;
border: 5px solid green;

}

*{
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="ex1">div width:300px;</div>
<div class="ex2">div width:300px;</div>
</body>
</html>

 

 

width
  • width. hegiht
  • max-width: 요소의 최대 너비를 설정
  • 속성값: %,px 
  • 속성값을 %로 주면 창의 너비에 따라 변한다. 
  • max-width: px; 값을 주면, 창의 너비를 키워도 max 값을 넘지 않는다. 

 

max-width 와 width 의 차이점 

width는 고정된 너비이기 때문에, 브라우저의 크기를 500보다 줄여도 , 줄여들지 않기 때문에 스크롤바가 생긴다 .

max-width는 고정되지 않은 너비이기 때문에 브라우저 크기에 따라 변한다 .

 

 

min-width 

최소너비 

저작자표시 (새창열림)

'WEB > CSS' 카테고리의 다른 글

[CSS] 텍스트  (0) 2022.05.20
[CSS] box model - 총넓이 , 총높이 계산  (0) 2022.05.20
[CSS] inherit (상속)  (0) 2022.05.20
[CSS] margin  (0) 2022.05.20
[CSS] border -css 테두리  (0) 2022.05.20
'WEB/CSS' Related Articles more
Comments