CSS - 内边距 ¶

作者：KK
发表日期：2016.1.26

内边距属性padding和margin是相反的属性,margin控制外部的边距,它则控制内部的边距,实例:

<body>
	<div style="border:1px solid red;">内容第1行</div>
	<div style="margin-top:20px; padding-top:10px; border:1px solid red;">内容第1行</div>
</body>

实例中用黑边框描绘了div的大小区域,在加了padding-top属性后,第2个div的内容被div从内部顶部增加了10个像素的距离才开始显示内容,这就是内边距的效果,外边距的作用范围就是黑线外面的范围,内边距就是黑线里面的范围.

如果只写padding:10px;也是完全和margin一模一样表示上下左右都这个距离,要么就单独加-left,-right这些方向词来修饰单独的方向内边距,这个我不多说了,如果你有学好margin的用法,反过来理解就会用padding了

副作用：撑大了容器 ¶

padding会使得容器原来的大小变增加,下面定义了100*100的一个区域作为容器去装载文字,但增加10px的padding-top后自己的高度增大了10px变成110px

<body>
<div style="width:100px; height:100px; padding-top:10px; border:1px solid red;">容器里面的文字文字文字...</div>
</body>

那么如果不是padding-top而是直接padding的话,则上面增加10px,下面又增加10px,高度就变成了120,而左右也是这个道理

反正用了padding就会把自己变肥,小心着用哦!一般没事别乱用padding,宽度超出你的预期就不好了!

var shiftWindow = function () { scrollBy(0, -50) }; if (location.hash) setTimeout(shiftWindow, 1); window.addEventListener("hashchange", shiftWindow); var element = document.createElement("script"); element.src = "./jssearch.index.js"; document.body.appendChild(element); var searchBox = $('#searchbox'); // search when typing in search field searchBox.on("keyup", function(event) { var query = $(this).val(); if (query == '' || event.which == 27) { $('#search-resultbox').hide(); return; } else if (event.which == 13) { var selectedLink = $('#search-resultbox a.selected'); if (selectedLink.length != 0) { document.location = selectedLink.attr('href'); return; } } else if (event.which == 38 || event.which == 40) { $('#search-resultbox').show(); var selected = $('#search-resultbox a.selected'); if (selected.length == 0) { $('#search-results').find('a').first().addClass('selected'); } else { var next; if (event.which == 40) { next = selected.parent().next().find('a').first(); } else { next = selected.parent().prev().find('a').first(); } if (next.length != 0) { var resultbox = $('#search-results'); var position = next.position(); // TODO scrolling is buggy and jumps around // resultbox.scrollTop(Math.floor(position.top)); // console.log(position.top); selected.removeClass('selected'); next.addClass('selected'); } } return; } $('#search-resultbox').show(); $('#search-results').html('

No results

'); var result = jssearch.search(query); if (result.length > 0) { var i = 0; var resHtml = ''; for (var key in result) { if (i++ > 20) { break; } resHtml = resHtml + '

' + result[key].file.t + '' + '' + result[key].file.d + '

'; } $('#search-results').html(resHtml); } }); // hide the search results on ESC $(document).on("keyup", function(event) { if (event.which == 27) { $('#search-resultbox').hide(); } }); // hide search results on click to document $(document).bind('click', function (e) { $('#search-resultbox').hide(); }); // except the following: searchBox.bind('click', function(e) { e.stopPropagation(); }); $('#search-resultbox').bind('click', function(e) { e.stopPropagation(); }); });