img+p : Sibling Selector « Style Basics « HTML / CSS






  1. HTML / CSS
  2. Style Basics
  3. Sibling Selector

img+p

 
<!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" lang="en">
    <head>
        <title></title>
<style type="text/css">
h1 {
  margin: 0 0 .3em 0;
  padding: 0 0 .3em 0;
  border-bottom: 2px solid #666;
}

img+p {
  text-indent: 0;
}

p {
  margin: 0;
  padding: 0;
  text-indent: 2.5em;
  line-height: 1.5;
}

img {
  border: 1px solid red;
  width: 60%;
  max-width: 300px;
  float: left;
  margin-right: .7em;
  margin-bottom: .5em;
}


</style>

    </head>
    <body>

<div id="frame">

<h1>Constantly Checking Email</h1>

<img src="face.jpg" />

</div>

    </body>
</html>








Related examples in the same category

1.Sibling Selector with +
2.Direct Adjacent Sibling Combinators
3.Add tag together
4.li + li
5.direct adjacent sibling combinator