CODEWITHSUNDEEP
csshtml-rendering
Jason
Jason

Reputation: 3

How does style attributes work in hierarchical structure in html?

I'm a newbie in front-end side development. So, I have a lot of problems that I don't know even why it doesn't work well because I have insufficient background knowledge in the kind of field.

I have a question about why it works different when "style" attributes in different level in hierarchical structure. And, I'm using bootstrap, jquery and javascript, and css.

My code is like this. And it's a part of bootstrap modal. Any javascript, jquery is not related in the code as of now, even though I'll add script to that.

margin-bottom doesn't apply 

    <div class="form-row">
        <div class="form-group" style="margin-bottom:10px">
            <label class="col-lg-3 col-md-3 col-sm-3 col-xs-3 control-label">Info1</label>
            <input class="col-lg-8 col-md-8 col-sm-8 col-xs-8 input-text" id="Info1">
        </div>
    </div>

margin-bottom does apply in the case below

    <div class="form-row">
        <div class="form-group">
            <label class="col-lg-3 col-md-3 col-sm-3 col-xs-3 control-label" style="margin-bottom:10px">Info1</label>
            <input class="col-lg-8 col-md-8 col-sm-8 col-xs-8 input-text" id="Info1" style="margin-bottom:10px">
    </div>

I thought in the first case div with class form-group was wrapping two elements, (let say label and input) in it and margin-bottom was gonna have effect. But it seems like that it doesn't affect to its wrapping elements at all.

On the other hand, in the second case, style attribute works fine.

Why do they work different? Please tell me why and the working sequence and if any, recommend some well-descpriptive documents which explains flow like this.

I found some of links about rendering path like the following, but I'd like some more specific and fundamentals for css details, event if I'm not sure it's right request or not for my solution..

https://friendlybit.com/css/rendering-a-web-page-step-by-step/ https://medium.com/@luisvieira_gmr/understanding-the-critical-rendering-path-rendering-pages-in-1-second-735c6e45b47a

Thanks for any help in advance.

Upvotes: 0

Views: 357

Answers (1)

SpaceDogCS
SpaceDogCS

Reputation: 2968

That happens because the elements (div) aren't understanding them selves, if you open the inspector (CTRL+SHIFT+C) in your browser and select the form-group element, you'll see it doesn't have height, so he can't apply the margin to another element, if you add display:block or float left to the elements they will understand them selves, but, how you're using bootstrap, you could use the classes from boostrap, this way:

EDIT1 You don't even need to use the margin-bottom, the form-group class from bootstrap already put it

<div class="form-row">
        <div class="row">
            <div class="form-group col-sm-12" style="margin-bottom:10px">
                <label class="col-lg-3 col-md-3 col-sm-3 col-xs-3 control-label">Info1</label>
                <input class="col-lg-8 col-md-8 col-sm-8 col-xs-8 input-text" id="Info1">
            </div>
            <div class="form-group col-sm-12" style="margin-bottom:10px">
                <label class="col-lg-3 col-md-3 col-sm-3 col-xs-3 control-label">Info1</label>
                <input class="col-lg-8 col-md-8 col-sm-8 col-xs-8 input-text" id="Info1">
            </div>
        </div>
    </div>

Upvotes: 1

Related Questions