CoderTools Web site

CSS Padding - Changing the Padding of an HTML Element

Description



This command is used to change the size of html element padding. This is another short-hand property to specify the padding for the whole element. The behaviour is different for block elements and inline elements. For block elements all sides are affected - in other words the padding affects the height of the element. For inline elements the padding does not affect the height so the background and/or border could overlap adjacent elements above and below if padding is set. See example 3 below.
    padding: length;
    or
    padding: percentage;
    or
    padding: inherit;
Note: see also padding-left, padding-right, padding-top, padding-bottom
HTML & CSS Editor with FTP / FTPS

Examples for css padding


This example is to show how a div looks when no padding value is specified. Note: As per normal the div tag expands to the width of the parent element which in this case is the width of the main content area.

test text test text test text test text
    
    <style>
        #testnormal { border:1px solid black; }
        #outernormal { border:1px solid black; }
    </style>
    
    <div id="outernormal">
        <div id="testnormal">test text test text test text test text</div>
    </div>Give it a go!


This example is the same as before but we have set the padding to be 50 pixels. Note that because a div is a block level element the padding value is applied to all sides left, right, top and bottom:

test text test text test text test text
    <style>
        #test { padding: 50px; border:1px solid black; }
        #outer { border:1px solid black; }
    </style>
    
    <div id="outer">
        <div id="test">test text test text test text test text</div>
    </div>Give it a go!


This time we use a span instead of a div to wrap the text. Span is an inline element which do not expand to the parent, they wrap their contents only. Because span is an inline element the padding does not affect the height of the span and therefore the div tag does NOT expand when we add padding. This has the peculiar affect of the border of the span overlapping the containing div tag and any other text and tags adjacent to it (including this text!).
test text test text test text test text
    
    <style>
        #test3 { padding: 15px; border:1px solid red; }
        #outer { border:1px solid blue; }
    </style>
    
    <div id="outer">
        <span id="test3">test text test text test text test text</span>
    </div>
    Give it a go!

Values for css padding


Name Values Description
padding length
%
inherit
Specifies the size of the padding.


TotalEdit Now Completely Free

CoderTools TotalEdit - The Free Text Editor

A powerful editor and notepad replacement TotalEdit makes it easier to complete your file editing and software development tasks. TotalEdit is FREE for commercial and non-commercial purposes (its freeware).

10/23/2017 12:37:44 AM
Terms Of Use | Privacy Statement | Copyright 2006-2015 © Independence Software LLP