Home Random Page


CATEGORIES:

BiologyChemistryConstructionCultureEcologyEconomyElectronicsFinanceGeographyHistoryInformaticsLawMathematicsMechanicsMedicineOtherPedagogyPhilosophyPhysicsPolicyPsychologySociologySportTourism






The box model inCSS

The CSS box model describes the rectangular boxes that are generated for elements in the document tree and laid out according to the visual formatting model. All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout. The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content. The box model allows us to place a border around elements and space elements in relation to other elements. The image below illustrates the box model :

Explanation of the different parts: Margin - Clears an area around the border. The margin does not have a background color, it is completely transparent . Border - A border that goes around the padding and content. The border is affected by the background color of the box.

Padding - Clears an area around the content. The padding is affected by the background color of the box Content - The content of the box, where text and images appear

 

25 Margin and Padding inCSS

Set the margin in an element. An element has four sides: right, left, top and bottom. The margin is the distance from each side to the neighboring element (or the borders of the document). We will look at how you define margins for the document itself i.e. for the element <body>. The illustration below shows how we want the margins in our pages to be.

top

left right

 

 

Bottom

The CSS code for this would look as follow:

body {margin-top: 100px; margin-right: 40px; margin-bottom: 10px; margin-left: 70px; }

 

Set padding in an element : Padding can also be understood as "filling". This makes sense as padding does not affect the distance of the element to other elements but only defines the inner distance between the border and the content of the element. The usage of padding can be illustrated by looking at a simple example where all headlines have background colors:

h1 {background: yellow;: 20px 20px 20px 80px; } h2 {background: orange;padding-left:120px;

CSS borders

Borders can be used for many things, for example as a decorative element or to underline a separation of two things. CSS gives you endless options when using borders in your pages.


1 border-width

2 border-color

3 border-style

Border


The width of borders [border-width]

The width of borders is defined by the property border-width, which can obtain the values thin, medium, and thick, or a numeric value, indicated in pixels. The property border-color defines which color the border has. The values are the normal color-values for example "#123456", "rgb(123,123,123)" or "yellow" .

Types of borders [border-style]

There are different types of borders to choose from. Below are shown 8 different types of borders as Internet Explorer 5.5 interprets them. They ‘re: 1)dotted; 2) dashed; 3) solid; 4)double; 5) groove; 6) ridge; 7) inset; 8)outset.



Example: To illustrate example, we define different borders for <h1>, <h2>, <ul> and <p>. The result may not be that pretty but it illustrates some of the many possibilities:

h1 {

border-top-width: thick;

border-top-style: solid;

border-top-color: red;

 

border-bottom-width: thick;

border-bottom-style: solid;

border-bottom-color: blue;

 

border-right-width: thick;

border-right-style: solid;

border-right-color: green;

 

border-left-width: thick;

border-left-style: solid;

border-left-color: orange;}

 

 


Date: 2016-01-03; view: 1042


<== previous page | next page ==>
Text Transformation | Comparison operators, and logical values
doclecture.net - lectures - 2014-2024 year. Copyright infringement or personal data (0.006 sec.)