深入理解padding

長命百歲發表於2018-03-28

border-box

感受一下下面的程式碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .div{
      height: 200px;
        width: 200px;
        background: red;
        margin: 10px;
        border: 1px solid #000;
        padding: 20px;
    }
    #div1 {
        box-sizing: border-box;
        height: 200px;
        width: 200px;
        background: red;
        margin: 10px;
        border: 1px solid #000;
        padding: 20px;
    }
    #div2 {
        box-sizing: content-box;
        height: 200px;
        width: 200px;
        background: red;
        margin: 10px;
        border: 1px solid #000;
        padding: 20px;
    }
    </style>
    <body>
        <div class="div"></div>
        <div id="div1">border-box</div>
        <div id="div2">content-box</div>
    </body>
</html>

複製程式碼

inline 元素 padding

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
        	padding:0;
        }
        span{
        	padding-top:20px;
        	padding-right: 20px;
        	padding-bottom: 20px;
        	padding-left: 20px;
        }
    </style>
</head>
<body>
    <span>哈哈哈哈</span>
    <div>123</div>
</body>
</html>
<!--
對於inline 元素 垂直padding 不影響尺寸,失效的
但是 垂直方向影響了背景色區域
-->
複製程式碼

padding 不支援 負值

--------------------------------------------------------------------------------------------------------------------------
複製程式碼
div{
  padding:50%;
  background:red;
}
//永遠是正方形
複製程式碼

inline元素的文字斷行

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<style>
		span{
			padding:50%;
			background:red;
		}
	</style>
</head>
<body>
<span>
  文字若干
</span>
</body>
</html>
複製程式碼

Paste_Image.png

inline元素設定padding:50%(元素內無文字),不像div一樣是正方形。解決辦法是font-size:0(給父級);

不使用偽元素 實現三線

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<style>
            div{
                width:150px;
                height:30px;
                padding:15px 0;
                border-top: 30px solid;
                border-bottom: 30px solid;
                background-clip: content-box;  
                background-color: black;
            }
	</style>
</head>
<body>
	<div></div>
</body>
</html>
複製程式碼

Paste_Image.png

同樣,不用為元素實現眼睛

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<style>
		div{
			width:150px;
			height:150px;
			padding:10px;
			border:10px solid;
			border-radius: 50%;
			background-clip: content-box;
			background-color: black;
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>
複製程式碼

Paste_Image.png