CODEWITHSUNDEEP
htmlcss
Robert
Robert

Reputation: 10390

CSS borders and padding not all the same

HTML:

        <!-- start setup section -->
            <div class='photo-setup'>

                <div class='setup-head'>
                    <div class='photo-name'>Photo Name : <input type='text' placeholder='Photo Name' name='photo-name' title='Photo Name'></div>
                    <div class='photo-date'>Photo Date : <?php echo date('F j, o', time()) ?></div>
                </div>

                <div class='photo-section'>
                    <img src='' width='600' height='600' alt='photo'>
                </div>

                <div class='tag-section'>
                    Tags :  <input type='text' placeholder='Tags e.g. (#beach #park #dog)'>
                </div>

                <div class='commit-section'>
                    <a class='save' href='#'>Save</a><a class='cancel' href='#'>Cancel</a>
                </div>

            </div>
        <!-- end setup section-->

CSS:

img { border: none; }

.photo-setup {
    width: 600px;
    height: auto;
    margin: 0 auto;
}

.setup-head {
    border-left: 1px solid #cacece;
    border-right: 1px solid #cacece;
    border-top: 1px solid #cacece;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    padding: 1em;
}

.photo-name { float: left; }
.photo-date { float: right; }


.photo-section {
    border-left: 1px solid #cacece;
    border-right: 1px solid #cacece;
}

Result: https://jsfiddle.net/rw5beqtk/

Question 1: Why is the top and bottom padding in setup-head not the same?

Question 2: Why is the border of photo-section not the same as setup-head?

Upvotes: 0

Views: 180

Answers (3)

Asons
Asons

Reputation: 87191

Question 1: Why is the top and bottom padding in setup-head not the same?

Because your child element is floated and as such taken out of the normal flow. Setting overflow:hidden on setup-head will fix that.

.setup-head {
    border-left: 1px solid #cacece;
    border-right: 1px solid #cacece;
    border-top: 1px solid #cacece;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    padding: 1em;
    overflow: hidden;
}

Question 2: Why is the border of photo-section not the same as setup-head?

It is the photo-section's img child's border, so you get double. When an img element doesn't have a valid src, it gets a border representing the image size, which won't go away with border: none.

Sample snippet with an image and overflow: hidden

img { 
  border: none;
  vertical-align: top; 
}

.photo-setup {
  width: 600px;
  height: auto;
  margin: 0 auto;
}

.setup-head {
  border-left: 1px solid #cacece;
  border-right: 1px solid #cacece;
  border-top: 1px solid #cacece;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  padding: 1em;
  overflow: hidden;
}

.photo-name { float: left; }
.photo-date { float: right; }

.photo-section {
  border: 1px solid #cacece;
  overflow: hidden;
}
<div class='photo-setup'>

  <div class='setup-head'>
    <div class='photo-name'>Photo Name : <input type='text' placeholder='Photo Name' name='photo-name' title='Photo Name'></div>
    <div class='photo-date'>Photo Date : <?php echo date('F j, o', time()) ?></div>
  </div>

  <div class='photo-section'>
    <img src='http://placehold.it/600/eee' width='600' height='600' alt='photo'>
  </div>

  <div class='tag-section'>
    Tags :  <input type='text' placeholder='Tags e.g. (#beach #park #dog)'>
  </div>

  <div class='commit-section'>
    <a class='save' href='#'>Save</a><a class='cancel' href='#'>Cancel</a>
  </div>

</div>

Upvotes: 2

Josh Stevens
Josh Stevens

Reputation: 4221

Questions 1:

You have a float left and float right on photo-name and photo-date as such taken out of the normal flow, you have to add overflow:auto to the parent class so it does not lose its padding state.

img { border: none; }

.photo-setup {
	width: 600px;
	height: auto;
	margin: 0 auto;
}

.setup-head {
	border-left: 1px solid #cacece;
    border-right: 1px solid #cacece;
    border-top: 1px solid #cacece;
	border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    padding: 1em;
    overflow: auto;
}

.photo-name { float: left; }
.photo-date { float: right; }


.photo-section {
	border-left: 1px solid #cacece;
    border-right: 1px solid #cacece;
}
<!-- start setup section -->
<div class='photo-setup'>
    <div class='setup-head'>
        <div class='photo-name'>Photo Name : <input type='text' placeholder='Photo Name' name='photo-name' title='Photo Name'></div>
        <div class='photo-date'>Photo Date : <?php echo date('F j, o', time()) ?></div>
    </div>

            <div class='photo-section'>
                <img src='' width='600' height='600' alt='photo'>
            </div>

            <div class='tag-section'>
                Tags :  <input type='text' placeholder='Tags e.g. (#beach #park #dog)'>
            </div>

            <div class='commit-section'>
                <a class='save' href='#'>Save</a><a class='cancel' href='#'>Cancel</a>
            </div>

        </div>
<!-- end setup section-->

Question 2: It is the img childs border which the browser adds to it if there is not a src for it and can not be overridden. Easy fix for you though is to remove (as you already have a border round the image)

.photo-section {
    border-left: 1px solid #cacece;
    border-right: 1px solid #cacece;
}

from your code

img { border: none; }

.photo-setup {
	width: 600px;
	height: auto;
	margin: 0 auto;
}

.setup-head {
	border-left: 1px solid #cacece;
    border-right: 1px solid #cacece;
    border-top: 1px solid #cacece;
	border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    padding: 1em;
    overflow: auto;
}

.photo-name { float: left; }
.photo-date { float: right; }
<!-- start setup section -->
<div class='photo-setup'>
    <div class='setup-head'>
        <div class='photo-name'>Photo Name : <input type='text' placeholder='Photo Name' name='photo-name' title='Photo Name'></div>
        <div class='photo-date'>Photo Date : <?php echo date('F j, o', time()) ?></div>
    </div>

            <div class='photo-section'>
                <img src='' width='600' height='600' alt='photo'>
            </div>

            <div class='tag-section'>
                Tags :  <input type='text' placeholder='Tags e.g. (#beach #park #dog)'>
            </div>

            <div class='commit-section'>
                <a class='save' href='#'>Save</a><a class='cancel' href='#'>Cancel</a>
            </div>

        </div>
<!-- end setup section-->

Upvotes: 0

Guillaume Serrat
Guillaume Serrat

Reputation: 165

  1. Add overflow: hidden; to .setup-head or clear your floats.
  2. They are the same. You see a 2px border because the image is missing.

Upvotes: 0

Related Questions