Article
304
BOXES
304
BOXES
Some page designs expand and 
shrink to fit the size of the user's 
screen. In such designs, the 
min-width
property specifies 
the smallest size a box can be 
displayed at when the browser 
window is narrow, and the 
max-width
property indicates 
the maximum width a box can 
stretch to when the browser 
window is wide.
These are very helpful properties 
to ensure that the content of 
pages are legible (especially on 
the smaller screens of handheld 
devices). For example, you can 
use the 
max-width
property to 
ensure that lines of text do not 
appear too wide within a big 
browser window and you can 
use the 
min-width
property 
to make sure that they do not 
appear too narrow.
You may find it helpful to try this 
example out in your browser so 
that you can see what happens 
when you increase or decrease 
the size of the browser window.
Please note that these properties 
were first supported in IE7 and 
Firefox 2 so they will not work in 
older versions of these browsers.
Result
td.description {
min-width: 450px;
max-width: 650px;
text-align: left;
padding: 5px;
margin: 0px;}
Css
<tr>
<td><img src="images/rhodes.jpg" width="200" 
height="100" alt="Fender Rhodes" /></td>
<td class="description">The Rhodes piano is an 
electro-mechanical piano, invented by Harold 
Rhodes during the fifties and later 
manufactured in a number of models ...</td>
<td>$1400</td>
</tr>
chapter-13/min-width-max-width.html
HtMl
limiting WiDth
min-width, max-width
Pdf password encryption - C# PDF Password Library: add, remove, edit PDF file password in C#.net, ASP.NET, MVC, WinForms, WPF
Help to Improve the Security of Your PDF Document by Setting Password
adding a password to a pdf; copy text from protected pdf
Pdf password encryption - VB.NET PDF Password Library: add, remove, edit PDF file password in vb.net, ASP.NET, MVC, WinForms, WPF
Help to Improve the Security of Your PDF Document by Setting Password
open password protected pdf; password pdf
305 BOXES
Article
305 BOXES
Result
h2, p {
width: 400px;
font-size: 90%;
line-height: 1.2em;}
h2 {
color: #0088dd;
border-bottom: 1px solid #0088dd;}
p {
min-height: 10px;
max-height: 30px;}
In the same way that you might 
want to limit the width of a box 
on a page, you may also want 
to limit the height of it. This is 
achieved using the 
min-height
and 
max-height
properties.
The example on this page 
demonstrates these properties 
in action. It also shows you what 
happens when the content of the 
box takes up more space than 
the size specified for the box. 
If the box is not big enough to 
hold the content, and the content 
expands outside the box it can 
look very messy. To control 
what happens when there is not 
enough space for the content of 
a box, you can use the 
overflow
property, which is discussed on 
the next page.
<h2>Fender Mustang</h2>
<p>The Fender Mustang was introduced in 1964 as the 
basis of a major redesign of Fender's ...</p>
<h2>Fender Stratocaster</h2>
<p>The Fender Stratocaster or "Strat" is one of the 
most popular electric guitars of all time ...</p>
<h2>Gibson Les Paul</h2>
<p>The Gibson Les Paul is a solid body electric 
guitar that was first sold in 1952 ...</p>
chapter-13/min-height-max-height.html
HtMl
limiting height
min-height, max-height
Css
Online Remove password from protected PDF file
Find your password-protected PDF and upload it. If there is no strong encryption on your file, it will be unlocked and ready to download within seconds.
add password to pdf preview; a pdf password online
C# PDF File Permission Library: add, remove, update PDF file
outputFilePath = Program.RootPath + "\\" 3_pw_a.pdf"; // Create a setting object with user password "Hello World". Hello World"); // Set encryption level to
convert password protected pdf to excel online; convert password protected pdf files to word online
Article
306
BOXES
306
BOXES
The 
overflow
property tells the 
browser what to do if the content 
contained within a box is larger 
than the box itself. It can have 
one of two values:
hidden
This property simply hides any 
extra content that does not fit in 
the box.
scroll
This property adds a scrollbar to 
the box so that users can scroll 
to see the missing content.
On the left, you can see two 
boxes whose contents expand 
beyond their set dimensions. The 
first example has the 
overflow
property with a value of 
hidden
The second example has the 
overflow
property with a value 
of 
scroll
.
The 
overflow
property is 
particularly handy because some 
browsers allow users to adjust 
the size of the text to appear as 
large or as small as they want. If 
the text is set too large then the 
page can become an unreadable 
mess. Hiding the overflow on 
such boxes helps prevent items 
overlapping on the page.
Result
p.one {
overflow: hidden;}
p.two {
overflow: scroll;}
Css
overfloWing content
overflow
<h2>Fender Stratocaster</h2>
<p class="one">The Fender Stratocaster or "Strat" 
is one of the most popular electric guitars of 
all time, and its design has been copied by many 
guitar makers. It was designed by Leo... </p>
<h2>Gibson Les Paul</h2>
<p class="two">The Gibson Les Paul is a solid body 
electric guitar that was first sold in 1952. 
The Les Paul was designed by Ted McCarty... </p>
chapter-13/overflow.html
HtMl
VB.NET PDF File Permission Library: add, remove, update PDF file
As String = Program.RootPath + "\\" 3_pw_a.pdf" ' Create a password setting object with user password "Hello World Hello World") ' Set encryption level to
copy text from protected pdf to word; convert password protected pdf to normal pdf online
VB.NET PDF File Compress Library: Compress reduce PDF size in vb.
NET class. Also able to uncompress PDF file in VB.NET programs. Support PDF encryption in VB.NET class applications. A professional
pdf password security; pdf password protect
307 BOXES
If you specify a width 
for a box, then the 
borders, margin, and 
padding are added to 
its width and height.
Every box has three available properties that 
can be adjusted to control its appearance:
BorDer, mArgin 
& PADDing
1
Border
Every box has a border (even if 
it is not visible or is specified to 
be 0 pixels wide). The border 
separates the edge of one box 
from another.
2
Margin
Margins sit outside the edge 
of the border. You can set the 
width of a margin to create a 
gap between the borders of two 
adjacent boxes.
3
Padding
Padding is the space between 
the border of a box and any 
content contained within it. 
Adding padding can increase the 
readability of its contents.
hello
VB.NET Word: How to Convert Word Document to PNG Image Format in
and document formats, including converting Word to PDF in VB protection by utilizing the modern Advanced Encryption Standard that converts a password to a
pdf owner password; create pdf password
C# Image: How to Annotate Image with Freehand Line in .NET Project
Tutorials on how to add freehand line objects to PDF, Word and TIFF SDK; Protect sensitive image information with redaction and encryption annotation objects;
add password to pdf online; advanced pdf password remover
308
BOXES
Designers refer to the space 
between items on a page as 
white space. Imagine you had 
a border around a box. You 
would not want the text to touch 
this border or it would become 
harder to read.
Or, imagine you had two boxes 
sitting side by side (each with 
a black border). You would not 
necessarily want the boxes to 
touch edges as this would make 
the line look twice as thick on 
the facing sides.
If the bottom margin of any 
box touches the top margin of 
another, the browser will render 
it differently than you might 
expect. It will only show the 
larger of the two margins. If both 
margins are the same size, it will 
only show one.
The 
padding
and 
margin
properties 
are very helpful 
in adding space 
between various 
items on the page.
White sPAce &
verticAl mArgin
With
mArgin & PADDing
Without
mArgin & PADDing
C# Image: C#.NET Code to Add HotSpot Annotation on Images
Protect sensitive information with powerful redaction and encryption annotation objects to provide powerful & profession imaging controls, PDF document, image
create copy protected pdf; password on pdf
C# Image: Add Watermark to Images Within RasterEdge .NET Imaging
powerful and reliable color reduction products, image encryption decryption, and even to provide powerful & profession imaging controls, PDF document, image to
break pdf password online; break pdf password
309 BOXES
Article
309 BOXES
Result
p.one {
border-width: 2px;}
p.two {
border-width: thick;}
p.three {
border-width: 1px 4px 12px 4px;}
<p class="one">Hohner's "Clavinet" is essentially an 
electric clavichord.</p>
<p class="two">Hohner's "Clavinet" is essentially an 
electric clavichord.</p>
<p class="three">Hohner's "Clavinet" is essentially 
an electric clavichord.</p>
chapter-13/border-width.html
HtMl
The 
border-width
property 
is used to control the width 
of a border. The value of this 
property can either be given 
in pixels or using one of the 
following values:
thin
medium
thick
(You cannot use percentages 
with this property.)
You can control the individual 
size of borders using four 
separate properties:
border-top-width
border-right-width
border-bottom-width
border-left-width
You can also specify different 
widths for the four border values 
in one property, like so:
border-width: 2px 1px 1px 
2px;
The values here appear in 
clockwise order: top, right, 
bottom, left.
BorDer WiDth
border-width
Css
Article
310
BOXES
310
BOXES
You can control the style of a 
border using the 
border-style
property. This property can take 
the following values:
solid a single solid line
dotted a series of square dots
(if your border is 2px wide, then 
the dots are 2px squared with a 
2px gap between each dot)
dashed a series of short lines
double two solid lines (the 
value of the 
border-width
property creates the sum of the 
two lines)
groove appears to be carved 
into the page
ridge appears to stick out from 
the page
inset appears embedded into 
the page
outset looks like it is coming 
out of the screen
hidden / none no border is 
shown
You can individually change the 
styles of different borders using:
border-top-style
border-left-style
border-right-style
border-bottom-style
Result
p.one {border-style: solid;}
p.two {border-style: dotted;}
p.three {border-style: dashed;}
p.four {border-style: double;}
p.five {border-style: groove;}
p.six {border-style: ridge;}
p.seven {border-style: inset;}
p.eight {border-style: outset;}
Css
<p class="one">Wurlitzer Electric Piano</p>
<p class="two">Wurlitzer Electric Piano</p>
<p class="three">Wurlitzer Electric Piano</p>
<p class="four">Wurlitzer Electric Piano</p>
<p class="five">Wurlitzer Electric Piano</p>
<p class="six">Wurlitzer Electric Piano</p>
<p class="seven">Wurlitzer Electric Piano</p>
<p class="eight">Wurlitzer Electric Piano</p>
chapter-13/border-style.html
HtMl
BorDer style
border-style
311 BOXES
Article
311 BOXES
Result
p.one {
border-color: #0088dd;}
p.two {
border-color: #bbbbaa #111111 #ee3e80 #0088dd;}
Css
<p class="one">The ARP Odyssey was introduced in 
1972.</p>
<p class="two">The ARP Odyssey was introduced in 
1972.</p>
chapter-13/border-color.html
HtMl
You can specify the color of a 
border using either RGB values, 
hex codes or CSS color names 
(as you saw on pages 251-252).
It is possible to individually 
control the colors of the borders 
on different sides of a box using:
border-top-color
border-right-color
border-bottom-color
border-left-color
It is also possible to use a 
shorthand to control all four 
border colors in the one 
property:
border-color: darkcyan 
deeppink darkcyan 
deeppink;
The values here appear in 
clockwise order: top, right, 
bottom, left.
You could also use HSL values 
to specify the color as shown 
on pages 255-256. However, 
these were only introduced in 
CSS3 and will not work in older 
browsers.
BorDer color
border-color
Article
312
BOXES
312
BOXES
The 
border
property allows you 
to specify the width, style and 
color of a border in one property 
(and the values should be coded 
in that specific order).
Result
p {
width: 250px;
border: 3px dotted #0088dd;}
Css
<p>Here is a simple chord sequence played on a 
Hammond organ through a Leslie speaker.</p>
chapter-13/border-shorthand.html
HtMl
shorthAnD
border
313 BOXES
Article
313 BOXES
Result
p {
width: 275px;
border: 2px solid #0088dd;}
p.example {
padding: 10px;}
Css
The 
padding
property allows 
you to specify how much space 
should appear between the 
content of an element and its 
border. 
The value of this property is 
most often specified in pixels 
(although it is also possible to 
use percentages or ems). If a 
percentage is used, the padding 
is a percentage of the browser 
window (or of the containing box 
if it is inside another box).
Please note: If a width is 
specified for a box, padding is 
added onto the width of the box.
As you can see, the second 
paragraph here is much easier 
to read because there is a space 
between the text and the border 
of the box. The box is also wider 
because it has padding.
You can specify different values 
for each side of a box using:
padding-top
padding-right
padding-bottom
padding-left
Or you can use a shorthand 
(where the values are in 
clockwise order: top, right, 
bottom, left):
padding: 10px 5px 3px 1px;
<p>Analog synths produce a wave sound, whereas the 
sounds stored on a digital synth have been 
sampled and then turned into numbers.</p>
<p class="example">Analog synths produce a wave 
sound, whereas the sounds stored on a digital 
synth have been sampled and then ... </p>
chapter-13/padding.html
HtMl
PADDing
padding
The value of the 
padding
property is not inherited by child elements in 
the same way that the 
color
value of the 
font-family
property is; so 
you need to specify the 
padding
for every element that needs to use it.
Up until Internet Explorer 6, the width of the box would include the 
padding and margins. You can see more about this on page 316.
Documents you may be interested
Documents you may be interested