The Box Model Area Q&A


#1

Whoa, this is really strange. I am learning about the block and inline-block thing. They say I'm doing an excellent job when the output looks really strange. Here's my html code.

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
        <title>Result</title>
    </head>
    <body>
        <inline-block id="one"></inline-block>
        <inline-block id="two"></inline-block>
        <inline-block id="three"></inline-block>
        <inline-block id="four"></inline-block>
    </body>
</html>

And here's my CSS

* {
    border: 1px dashed blue;
}

inline-block {
    height: 50px;
    width: 100px;
    border: 2px solid black;
    border-radius: 5px;
    /*Add your CSS here!*/
    
}

#one {
    background-color: #FF0000;
}

#two {
    background-color: #0000FF;
}

#three {
    background-color: #FFD700;
}

#four {
    background-color: #308014;
}

The out put is very strange. Hopefully you will spot the problem.Thanks

(This is the "Q". Yours will be the "A")


#2

inline-block is a css value, not a html element. change your <inline-block></inline-block> to <div></div> elements, change your css selector from inline-block to div, and then follow the instructions from the lessons:

Change the display property of all your <div>s so the value is now inline-block instead of block

The reason your output looks weird is because inline-block is not a html element, so the element is inline, which means the width will be minimal (zero height) because there is no text in it, so you only see the border


#3

Keep HTML default as it was (as stetim94 warned you). You should add just "display" and "inline-block" into CSS in a following way:

  • {
    border: 1px dashed blue;
    }

div {
height: 50px;
width: 100px;
border: 2px solid black;
border-radius: 5px;
/*Add your CSS here!*/
display: inline-block;
}

one {

background-color: #FF0000;

}

two {

background-color: #0000FF;

}

three {

background-color: #FFD700;

}

four {

background-color: #308014;

}


#4

Thanks alot folks----but I'm back with guess what...another problem! :stuck_out_tongue_winking_eye: I'm at the review and got stuck(aren't reveiws supposed to stump you anyway?). The correcter-thinga-ma-bob tells me that I have to: Oops, try again. And asked me: Did you set your <div>'s border to 1px wide? I expect it has something to do with my CSS code so I am "posting" it first. But I am still putting the html code:

/*Add your CSS below!*/
div {
border: 1px solid black;
background-color: #cc0000;
margin: 10px 5px 5px 50px;
padding: 0px 30px 0px 10px;
}

And html

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
        <title>Result</title>
    </head>
    <body>
        <div></div>
    </body>
</html>

The corrector-thinga-ma-bob mentioned just one mistake, but there may be more (hint, hint:smirk:)


#5

Looks fine, make sure zoom is set to 100%. If you hit a glitch, try a different browser