#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2013
    Posts
    5
    Rep Power
    0

    Seems the css rule isn't being followed


    Studying CSS and something with the below code is driving me crazy. If you look at the css styles, there is an image tag wrapped in a div tag called photos. According to what I understand about inline elements, it will not recognize top and bottom margins when it is designated as display: inline; YET, you look at the image element and it is given this property:
    margin: 10px;
    From what I thought I had learned, the display would show the left and right 10px of margin, but ignore the 10px of top and bottom. BUT IT DOESN'T! It accepts 10px of margin on the top and bottom too. Am I missing something about inheritance or something else?

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>normal document flow</title>
    <style>
    /*add styles here*/
    aside, article, section, header, footer, nav {
    	display: block;
    }
    div, h1, h2, h3, p, img {
    	margin: 0;
    	padding: 0;
    }
    html {
    	margin: 0;
    	padding: 0;
    	background: rgb(100, 98, 102);
    }
    body {
    	margin: 0 auto;
    	padding: 0 0 25px;
    	font: 100% Georgia, "Times New Roman", Times, serif;
    	background: rgb(255,255,255);
    	width: 900px;
    }
    header {
    	padding: 20px 25px;
    	background: rgb(76, 67, 65);
    }
    article {
    	padding: 0 25px;
    	margin-top: 25px;
    }
    .photos {
    	margin: 0 auto;
    	width: 822px;
    	padding: 10px;
    	background: rgb(100, 98, 102);
    }
    img {
    	margin: 10px;
    	border: 2px solid white;	
    }
    .normal {
    	width: 842px;
    	margin: 25px auto;
    	border: 1px solid black;
    	background: rgb(237, 228, 214);
    	font-size: 90%;
    	padding: 0;
    }
    .normal h2 {
    	border: none;
    	background: rgb(219,126,64);
    	color: white;
    	padding: 5px 10px;
    }
    .normal p, .normal h3 {
    	padding: 0 10px;
    }
    h1 {
    	font-size: 1.6em;
    	font-weight: normal;
    	color: rgb(255,255,255);
    }
    h2 {
    	font: 1.2em Arial, Helvetica, sans-serif;
    	border-bottom: 1px solid black;
    	margin-bottom: .4em;
    }
    h3 {
    	font: 1.1em Arial, Helvetica, sans-serif;
    	margin-bottom: .4em;
    	font-weight: bold;
    }
    p {
    	margin-bottom: 1em;
    	line-height: 1.6;
    }
    </style>
    </head>
    <body>
    <header>
    <h1>Welcome to my gallery</h1>
    </header>
    <article class="gallery">
    <h2>Current gallery: Philadelphia</h2>
    <p>Here's a series of photos I took from my recent visit to Philadelphia. I love Philadelphia, it has wonderful neighborhoods, a vibrant downtown, and the type of hidden architectural gems that you only get from older cities. It's a joy to shoot, just be sure not to call it "Philly," turns out the locals really don't like that!</p>
    <div class="photos">
    <img src="_images/philly_1.jpg" width="250" height="189" alt="Philadelphia"><img src="_images/philly_2.jpg" width="250" height="189" alt="Philadelphia"><img src="_images/philly_3.jpg" width="250" height="189" alt="Philadelphia"><img src="_images/philly_4.jpg" width="250" height="189" alt="Philadelphia"><img src="_images/philly_5.jpg" width="250" height="189" alt="Philadelphia"><img src="_images/philly_6.jpg" width="250" height="189" alt="Philadelphia"></div>
    </article>
    <article class="normal">
    <h2>Exploring HTML normal document flow</h2>
    <p>Prior to HTML5, HTML elements could be categorized as "block-level" or "inline-level." For the most part that's still true, although HTML5 created multiple element content categorizations such as Phrasing, Flow, and Sectioning that replace the more global block-level and inline-level categorization. Regardless, browsers still display content primarily using those two definitions. Most Phrasing content is displayed as inline-level elements while Heading and Sectioning content is displayed as block-level.</p>
    <p>What does this mean? Well, block-level elements are typically formatted with a line break before and after the content; resulting in the content occupying it's own line on the page. Some block-level elements, like divs and the new HTML5 sectioning elements, can contain other block-level elements, while others like paragraphs and headings cannot.</p>
    <p>Inline-level elements typically occur within another block-level element (although they don't have to) and generally contain either data or other inline-level elements. This content typically displays horizontally along the entire width of the viewport, only breaking down to a new line when the viewport width forces it to. Images, bold, italic, strong, emphasis, inputs, and links are all examples of inline-level elements.</p>
    <h3>How normal document flow works</h3>
    <p>Browsers display content in the order that it is found. Content at the top of the document, for example, is displayed first and is followed by the content after it. Block-level elements are displayed on their own line, while inline-level elements are displayed as part of the normal flow of document content. The results in the "stacking" of block-level blocks and the flow of inline-level elements within these blocks.</p>
    </article>
    </body>
    </html>
    Last edited by Kravvitz; May 15th, 2013 at 04:16 PM. Reason: fixed the code tags
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    875
    Rep Power
    275
    are you sure you aren't just seeing the 10px of padding that you have given to the photos class?

    If you are seeing spacing around the images inside that <div class="photos"></div>, then, that is the padding you are seeing, I'm pretty sure.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2013
    Posts
    5
    Rep Power
    0
    First, thanks for the consideration in helping me figure this out, Don.

    The padding is in the .photos class and if you remove the 10px padding from the class, the padding around the wrapping element (the inner edge of the container (the div tag)) is reduced by 10px on all sides. The areas between the actual photos (all using an img element) are not effected when you remove the padding.

    However, if you remove the margin: 10px; which is part of the img element code, the area between the images shrinks both sideways (width) AND up and down (length).

    According to inline elements, the only shrinkage I should be seeing is sideways.

    Befuddled and not understanding why the rule is not working.
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    875
    Rep Power
    275
    In my research [google is your friend], I found that IMG tags actually act as "inline-block" elements. This means that they flow inline like text, but also have a width and height like block elements.
    Which is why the margin:10px; is affecting both height and width..
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2013
    Posts
    5
    Rep Power
    0
    You're right Don. Below is an explanation sent to me via the author of the code saying the same thing you are. Can you believe that the Internet sometimes disperses inaccurate information? So hard to believe. I was attempting to get additional info about block and inline elements and I obviously picked the wrong source. As a side note, this was obtained from a course on Lynda.com which has many excellent courses pertaining to HTML5, CSS and so many other topics. I have found it to be money well spent to be a member of that group.

    Instructor James Williamson's comment:
    All elements, both inline and block recognize and apply
    margins. I think where the confusion is coming in is that inline elements do NOT collapse vertical margins, while block level elements do. Thatąs why the vertical margins on the images not only work, but actually apply equally all the way around instead of collapsing. I mention that in the movie he references, but perhaps I didnąt go into that point in enough detail. I should point out that this only applies to elements themselves, not the context of a line box. The text within a paragraph (for example) is considered a line box, and is controlled through line-height. If you surround the same text with a span element, margins would work horizontally, but not vertically (this is ignored as it would disrupt the paragraph).

IMN logo majestic logo threadwatch logo seochat tools logo