HTML/CSS/Box Model/Inline Elements

Материал из Web эксперт
Перейти к: навигация, поиск

Block-level elements

 
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Block and Inline Elements</title>
  </head>
  <body>
    <h1>Block-Level Elements</h1>
      <p><strong>Block-level elements</strong> The
      <code>&lt;h1&gt;</code> and <code>&lt;p&gt;</code>.</p>
  </body>
</html>



CSS provides the following properties for styling inline boxes:

 
display:inline; 
visibility, 
line-height, 
margin, 
padding, 
border, 
background,



float inline block becomes block of multiline inline box

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   <html>
        <head>
            <title></title>
            <style type="text/css">
                div {
                    margin: 10px;
                    background: gold;
                    height: 100px;
                }
                span#floated {
                    background: pink;
                    margin: 10px;
                    padding: 10px;
                    border: 1px solid black;
                    float: left;
                    width: 100px;
                }
                span#normal {
                    background: red;
                    border: 1px solid black;
                    padding: 20px;
                    margin: 20px;
                }
            </style>
        </head>
        <body>
            <div>
                <span id="floated">
                    This span is floated left.
                </span>
                <span id="normal">
                    The text of this span is beside the floated span.
                    The text of this span is beside the floated span.
                    The text of this span is beside the floated span.
                    The text of this span is beside the floated span.
                    The text of this span is beside the floated span.
                    The text of this span is beside the floated span.
                    The text of this span is beside the floated span.
                </span>
                This is extra text. 
            </div>
        </body>
    </html>



float inline elements becomes block

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   <html>
        <head>
            <title></title>
            <style type="text/css">
                div {
                    margin: 10px;
                    background: red;
                    height: 100px;
                }
                span#floated {
                    background: pink;
                    margin: 10px;
                    padding: 10px;
                    border: 1px solid black;
                    float: left;
                    width: 100px;
                }
                span#normal {
                    background: gold;
                    border: 1px solid black;
                    margin: 100px;
                    width: 1000px;
                }
            </style>
        </head>
        <body>
            <div>
                <span id="floated">
                    This span is floated left.
                </span>
                <span id="normal">
                    The text of this span is beside the floated span.
                </span>
                This is extra text. This is extra text. This is extra text. 
                This is extra text. This is extra text. This is extra text.
                This is extra text. This is extra text. This is extra text.
                This is extra text. This is extra text. This is extra text.
                This is extra text. This is extra text. This is extra text.
                This is extra text. This is extra text. This is extra text.
            </div>
        </body>
    </html>



float inline with block inline padding

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   <html>
        <head>
            <title></title>
            <style type="text/css">
                div {
                    margin: 10px;
                    background:red;
                    height: 100px;
                }
                span#floated {
                    background: pink;
                    margin: 10px;
                    padding: 10px;
                    border: 1px solid black;
                    float: left;
                    width: 100px;
                }
                span#normal {
                    background: gold;
                    border: 1px solid black;
                    margin: 100px;
                    width: 1000px;
                    padding: 50px;
                }
            </style>
        </head>
        <body>
            <div>
                <span id="floated">
                    This span is floated left.
                </span>
                <span id="normal">
                    The text of this span is beside the floated span.
                </span>
                This is extra text. This is extra text. This is extra text. 
                This is extra text. This is extra text. This is extra text.
                This is extra text. This is extra text. This is extra text.
                This is extra text. This is extra text. This is extra text.
                This is extra text. This is extra text. This is extra text.
                This is extra text. This is extra text. This is extra text.
            </div>
        </body>
    </html>



Inline Box

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
* .box {
  display: inline;
  visibility: visible;
  line-height: 100px;
  margin: 0 100px;
  padding: 20px 120px;
  border-top: 5px solid gray;
  border-bottom: 5px solid black;
  border-left: 5px solid gray;
  border-right: 5px solid black;
}
</style>
</head>
<body>
<div class="container"> 
<span class="default">BEFORE</span> 
<span class="box">this is a test. </span> 
<span class="default">AFTER</span> 
</div> 
</body> 
</html>



inline element is floated

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>float</title>
        <style rel="stylesheet" type="text/css">
span#inline {
    float: left;
    background: khaki;
    border: 1px solid gold;
    padding: 5px;
    margin: 5px;
}
        
        </style>
    </head>
    <body>
      <p>
         <span id="inline">
             block-level element with shrink-to-fit sizing.
         </span>
     </p>
 </body>
</html>



Inline Elements list

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body> 
<h1>Inline Elements</h1> 
<h2>Italicized</h2> 
<code>&lt;em&gt; </code> <em>emphasized</em> <br /> 
<code>&lt;cite&gt; </code> <cite>citation</cite> <br /> 
<code>&lt;var&gt; </code> <var>computer variable</var> <br /> 
<code>&lt;dfn&gt; </code> <dfn>definition</dfn> <br /> 
<h2>Bold</h2> 
<code>&lt;strong&gt; </code> <strong>strongly emphasized</strong> <br /> 
<h2>Monospace</h2> 
<code>&lt;code&gt; </code> <code>computer code</code> <br /> 
<code>&lt;kbd&gt; </code> <kbd>key press</kbd> <br /> 
<code>&lt;samp&gt; </code> <samp>sample computer output</samp> <br /> 
<h2>Underlined</h2> 
<code>&lt;a&gt; </code> <a href="#">a</a> <br /> 
<code>&lt;acronym&gt; </code> <acronym title="a" >acronym</acronym> <br /> 
<code>&lt;abbr&gt; </code> <abbr title="a" >abbreviation</abbr> <br /> 
<h2>Vertical-aligned</h2> 
<code>&lt;sup&gt; </code> superscript<sup>1</sup> <br /> 
<code>&lt;sub&gt; </code> subscript<sub>1</sub> <br /> 
</body> 
</html>



Middle Aligned INLINE

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>
<style type="text/css" media="Screen">
* .grandContainer {
  position: relative;
  height: 300px;
  width: 700px;
  border: 2px solid black;
  background: yellow;
}
* .extrastyle {
  width: 120px;
  padding: 5px;
  text-align: center;
  border: 1px dotted black;
  background: red;
  position: relative;
  border: 5px solid black;
  background-color: gold;
  left: 0;
}
#myStyle {
  height: 100px;
  top: 0;
  margin-top: auto;
  bottom: 0;
  margin-bottom: auto;
  position: absolute;
  line-height: 100px;
  margin-left: 40px;
  background: pink;
}
</style>
</head>
<body>
<div class="grandContainer"> 
    <div id="myStyle" class="extrastyle">INLINE</div> 
</div> 

</body>
</html>



Middle Offset INLINE

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>
<style type="text/css" media="Screen">
* .grandContainer {
  position: relative;
  height: 300px;
  width: 700px;
  border: 2px solid black;
  background: red;
}
* .ex1 {
  width: 120px;
  padding: 5px;
  text-align: center;
  border: 1px dotted black;
  background: yellow;
  position: relative;
  border: 5px solid black;
  background-color: gold;
  left: 0;
  background: gold;
}
#myStyle {
  height: 100px;
  top: 60px;
  margin-top: auto;
  bottom: -60px;
  margin-bottom: auto;
  position: absolute;
  line-height: 100px;
  margin-left: 40px;
  background: pink;
}
</style>
</head>
<body>
<div class="grandContainer"> 
    <div id="myStyle" class="ex1">INLINE</div> 
</div> 
</body>
</html>



On an inline-block element, a positive value in margin-top expands the height of the line and a negative value shrinks it.

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.container{
    width: 800px;
    height: 800px;
    background: pink;
}
* .box {
  float: right;
  overflow: auto;
  visibility: visible;
  width: auto;
  height: 100px;
  margin: 10px;
  padding: 10px;
  background: red;
}
* .small {
    position: absolute;
    margin-top: 10%;
    background: yellow;  
}
</style>
</head>
<body>
  <div class="container"> 
        <img class="small" src="http://www.wbex.ru/style/logo.png" alt="star"/>    
  </div> 
</body>
</html>



Shrinkwrapped Absolute right aligned

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>
<style type="text/css" title="text/css">
* .grandContainer {
  position: relative;
  height: 295px;
  width: 600px;
  border: 2px solid black;
  background: red;
}
* .parent {
  margin: 10px;
  padding: 10px;
  padding-top: 0;
  border: 1px solid black;
  background: purple;
}
* .example {
  padding: 5px;
  border: 5px solid black;
}
#myStyle {
  position: absolute;
  text-align: right;
  top: 0;
  margin-top: 200px;
  width: auto;
  left: auto;
  margin-left: auto;
  right: 0;
  margin-right: 0;
  background-color: gold;
}
</style>
</head>
<body>
<div class="grandContainer">Positioned Grandparent 
  <div class="parent">Non-positioned Parent 
    <span id="myStyle" class="example">Shrinkwrapped Absolute</span> 
  </div>
</div> 
</body>
</html>



Shrinkwrapped inline block by setting both width and height to auto

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#inline {
  width: auto;
  height: auto;
  background: yellow;
}

</style>
</head>
<body>
  <span id="inline">Shrinkwrapped Static Inline</span><br /> 
</body>
</html>



Stretched Absolute in relative positioned parent

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>
<style type="text/css" title="text/css">
* .grandContainer {
  position: relative;
  height: 295px;
  width: 600px;
  border: 2px solid black;
  background: red;
}
* .parent {
  margin: 10px;
  padding: 10px;
  padding-top: 0;
  border: 1px solid black;
  background: purple;
}
* .example {
  padding: 5px;
  border: 5px solid black;
}
#myStyle {
  position: absolute;
  text-align: right;
  top: 0;
  margin-top: 245px;
  width: auto;
  left: 0;
  margin-left: 0;
  right: 0;
  margin-right: 0;
  background-color: gold;
}
</style>
</head>
<body>
<div class="grandContainer">Positioned Grandparent 
  <div class="parent">Non-positioned Parent 
    <span id="myStyle" class="example">Stretched Absolute</span>
  </div>
</div> 
</body>
</html>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/Box_Model/Inline_Elements&oldid=5271»